:root {
    --paper: #e7eae8;
    --panel: #f2f4f1;
    --inset: #ffffff;
    --ink: #14181a;
    --ink-2: #3d4448;
    --muted: #6a7176;
    --line: #cfd5d0;
    --line-2: #dde2dd;
    --signal: #1f4dff;
    --signal-soft: rgba(31, 77, 255, .10);
    --signal-line: rgba(31, 77, 255, .28);
    --live: #157a54;
    --live-bg: rgba(21, 158, 107, .12);
    --shadow: 0 1px 0 rgba(20, 24, 26, .04), 0 14px 40px -28px rgba(20, 24, 26, .55);
    --maxw: 1000px;
    --measure: 60ch;
    --pad: clamp(1.15rem, 5vw, 2.4rem);
    --sp: clamp(4.5rem, 11vw, 8rem);
    --r: 10px;
    --sans: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

html[data-theme="dark"] {
    --paper: #0e1113;
    --panel: #161a1d;
    --inset: #1b2125;
    --ink: #e9ede9;
    --ink-2: #bcc3c1;
    --muted: #8b938f;
    --line: #2a3236;
    --line-2: #222a2e;
    --signal: #6f8dff;
    --signal-soft: rgba(111, 141, 255, .13);
    --signal-line: rgba(111, 141, 255, .30);
    --live: #3fc792;
    --live-bg: rgba(63, 199, 146, .14);
    --shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 18px 46px -30px rgba(0, 0, 0, .85);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

html {
    font-size: 16px;
    scroll-behavior: smooth
}

body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden
}

::selection {
    background: var(--signal);
    color: #fff
}

a {
    color: inherit
}

img,
svg {
    display: block;
    max-width: 100%
}

button {
    font: inherit;
    color: inherit;
    cursor: pointer;
    background: none;
    border: none
}

.grid-bg {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-image: linear-gradient(var(--line-2) 1px, transparent 1px), linear-gradient(90deg, var(--line-2) 1px, transparent 1px);
    background-size: 34px 34px;
    -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 100%);
    mask-image: radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 100%);
    opacity: .6
}

.skip {
    position: fixed;
    left: 1rem;
    top: -100px;
    z-index: 200;
    background: var(--ink);
    color: var(--paper);
    padding: .6rem 1rem;
    border-radius: 8px;
    font-family: var(--mono);
    font-size: .8rem;
    transition: top .2s
}

.skip:focus {
    top: 1rem
}

:focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 3px;
    border-radius: 3px
}

.topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .7rem var(--pad);
    background: color-mix(in srgb, var(--paper) 82%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid transparent;
    transition: border-color .25s, background .25s
}

.topbar.stuck {
    border-color: var(--line)
}

.mark {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-family: var(--mono);
    font-size: .82rem;
    letter-spacing: .02em;
    text-decoration: none
}

.mark svg {
    width: 20px;
    height: 20px;
    flex: none
}

.mark b {
    font-weight: 700
}

.mark span {
    color: var(--muted)
}

.bar-actions {
    display: flex;
    align-items: center;
    gap: .5rem
}

.btn-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--mono);
    font-size: .72rem;
    letter-spacing: .02em;
    padding: .42rem .7rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink-2);
    background: var(--panel);
    transition: .18s
}

.btn-chip:hover {
    border-color: var(--signal);
    color: var(--signal)
}

.btn-chip kbd {
    font: inherit;
    color: var(--muted);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 0 .32rem;
    line-height: 1.4
}

.icon-btn {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    transition: .18s
}

.icon-btn:hover {
    border-color: var(--signal);
    color: var(--signal)
}

.icon-btn svg {
    width: 16px;
    height: 16px
}

.theme-moon {
    display: none
}

html[data-theme="dark"] .theme-sun {
    display: none
}

html[data-theme="dark"] .theme-moon {
    display: block
}

.rail {
    position: fixed;
    left: max(1.1rem, calc((100vw - var(--maxw))/2 - 168px));
    top: 50%;
    transform: translateY(-50%);
    z-index: 40;
    display: none;
    flex-direction: column;
    gap: .1rem;
    padding-left: .9rem
}

.rail::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--line);
    border-radius: 2px
}

.rail-fill {
    position: absolute;
    left: 0;
    top: 0;
    width: 2px;
    background: var(--signal);
    border-radius: 2px;
    height: 0;
    transition: height .15s linear
}

.rail a {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    font-family: var(--mono);
    font-size: .72rem;
    letter-spacing: .02em;
    color: var(--muted);
    text-decoration: none;
    padding: .34rem 0;
    transition: color .18s, transform .18s
}

.rail a .n {
    opacity: .6
}

.rail a:hover {
    color: var(--ink)
}

.rail a.active {
    color: var(--signal);
    transform: translateX(2px)
}

.rail a.active .n {
    opacity: 1
}

main {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--pad)
}

.section {
    padding-block: var(--sp);
    border-top: 1px solid var(--line)
}

.section:last-of-type {
    padding-bottom: .5rem
}

#contact {
    padding-top: 2rem;
    padding-bottom: .5rem
}

.eyebrow {
    font-family: var(--mono);
    font-size: .72rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--signal);
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: 1.4rem
}

.eyebrow::before {
    content: "";
    width: 26px;
    height: 1px;
    background: var(--signal);
    opacity: .7
}

.h-sec {
    font-size: clamp(1.6rem, 4.4vw, 2.7rem);
    font-weight: 800;
    line-height: 1.07;
    letter-spacing: -.025em;
    margin-bottom: 1.5rem
}

.lede {
    font-size: clamp(1.02rem, 1.7vw, 1.18rem);
    color: var(--ink-2);
    max-width: var(--measure)
}

#masthead {
    padding-top: clamp(4.5rem, 8vw, 6rem);
    padding-bottom: var(--sp)
}

.mast-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center
}

.run-tag {
    font-family: var(--mono);
    font-size: .74rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1.3rem
}

.run-tag b {
    color: var(--ink);
    font-weight: 500
}

.mast-name {
    font-size: clamp(2.7rem, 8.5vw, 5rem);
    font-weight: 800;
    line-height: .96;
    letter-spacing: -.035em;
    margin-bottom: .5rem
}

.mast-role {
    font-family: var(--mono);
    font-size: clamp(.92rem, 2.2vw, 1.1rem);
    color: var(--signal);
    letter-spacing: .01em;
    margin-bottom: 1.5rem
}

.mast-role .div {
    color: var(--muted);
    margin: 0 .35em
}

.mast-thesis {
    font-size: clamp(1.05rem, 1.9vw, 1.28rem);
    line-height: 1.5;
    color: var(--ink);
    max-width: 36ch;
    margin-bottom: 1.5rem
}

.mast-thesis em {
    font-style: normal;
    color: var(--signal)
}

.mast-cta {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    align-items: center
}

.cta {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .72rem 1.25rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: .92rem;
    text-decoration: none;
    transition: .2s
}

.cta-solid {
    background: var(--ink);
    color: var(--paper)
}

.cta-solid:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow)
}

.cta-line {
    border: 1px solid var(--line);
    color: var(--ink-2);
    font-family: var(--mono);
    font-size: .82rem
}

.cta-line:hover {
    border-color: var(--signal);
    color: var(--signal)
}

.kbd-hint {
    font-family: var(--mono);
    font-size: .72rem;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    gap: .4rem
}

.kbd-hint kbd {
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: .05rem .4rem;
    color: var(--ink-2)
}

button.kbd-hint {
    cursor: pointer;
    transition: color .18s
}

button.kbd-hint:hover {
    color: var(--signal)
}

button.kbd-hint:hover kbd {
    border-color: var(--signal);
    color: var(--signal)
}

.kbd-hint.tap {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: .42rem .8rem;
    background: var(--panel)
}

.plot-head-r {
    display: flex;
    align-items: center;
    gap: .5rem
}

.replay {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--muted);
    font-size: .85rem;
    line-height: 1;
    transition: transform .35s ease, border-color .2s, color .2s
}

.replay:hover {
    border-color: var(--signal);
    color: var(--signal);
    transform: rotate(-180deg)
}

.btn-chip.nudge {
    animation: chipNudge 1.1s ease 2
}

@keyframes chipNudge {

    0%,
    100% {
        box-shadow: 0 0 0 0 var(--signal-soft)
    }

    50% {
        box-shadow: 0 0 0 5px var(--signal-soft)
    }
}

.has-js .reveal .tok {
    opacity: 0;
    transform: translateY(7px)
}

.has-js .reveal.in .tok {
    animation: tokPop .42s cubic-bezier(.34, 1.56, .64, 1) forwards
}

.stack-items .tok:nth-child(1) {
    animation-delay: .03s
}

.stack-items .tok:nth-child(2) {
    animation-delay: .07s
}

.stack-items .tok:nth-child(3) {
    animation-delay: .11s
}

.stack-items .tok:nth-child(4) {
    animation-delay: .15s
}

.stack-items .tok:nth-child(5) {
    animation-delay: .19s
}

.stack-items .tok:nth-child(6) {
    animation-delay: .23s
}

.stack-items .tok:nth-child(7) {
    animation-delay: .27s
}

.stack-items .tok:nth-child(8) {
    animation-delay: .31s
}

@keyframes tokPop {
    from {
        opacity: 0;
        transform: translateY(7px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.cmdk-foot {
    display: flex;
    gap: 1.1rem;
    padding: .6rem 1.1rem;
    border-top: 1px solid var(--line);
    font-family: var(--mono);
    font-size: .66rem;
    color: var(--muted)
}

.cmdk-foot span {
    display: inline-flex;
    align-items: center;
    gap: .35rem
}

.cmdk-foot kbd {
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 0 .3rem;
    color: var(--ink-2);
    font-size: .66rem
}

.telemetry {
    margin-top: 1.7rem;
    display: grid;
    grid-template-columns: repeat(5, auto);
    gap: 1.1rem 2.2rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--line);
    width: fit-content;
    max-width: 100%
}

.tele {
    display: flex;
    flex-direction: column;
    gap: .15rem
}

.tele-v {
    font-family: var(--mono);
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: -.02em;
    line-height: 1
}

.tele-v .pre {
    color: var(--muted);
    font-weight: 400
}

.tele-k {
    font-family: var(--mono);
    font-size: .62rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted)
}

.plot {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 1.1rem 1.1rem 1rem;
    box-shadow: var(--shadow)
}

#scrollbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--signal), var(--ink));
    transform: scaleX(0);
    transform-origin: left;
    z-index: 200;
    will-change: transform
}

.plot {
    position: relative
}

.xhair-line {
    stroke: var(--ink-2);
    stroke-width: 1;
    stroke-dasharray: 3 3;
    opacity: .5
}

.xhair-dot {
    fill: var(--paper);
    stroke-width: 2
}

.xhair-dot.l {
    stroke: var(--signal)
}

.xhair-dot.a {
    stroke: var(--live)
}

#xhair {
    opacity: 0;
    transition: opacity .12s
}

.plot.inspect #xhair {
    opacity: 1
}

.plot.inspect .loss-dot,
.plot.inspect .acc-dot,
.plot.inspect .loss-dot-ring,
.plot.inspect .acc-dot-ring {
    opacity: .22;
    transition: opacity .12s
}

.plot-tip {
    position: absolute;
    pointer-events: none;
    background: var(--inset);
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: .32rem .55rem;
    font-family: var(--mono);
    font-size: .66rem;
    color: var(--ink);
    white-space: nowrap;
    opacity: 0;
    transition: opacity .12s;
    box-shadow: var(--shadow);
    z-index: 3;
    transform: translate(-50%, -135%)
}

.plot.inspect .plot-tip {
    opacity: 1
}

.plot-tip b {
    font-weight: 700
}

.plot-tip .tl {
    color: var(--signal)
}

.plot-tip .ta {
    color: var(--live)
}

.plot-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .7rem
}

.plot-title {
    font-family: var(--mono);
    font-size: .74rem;
    letter-spacing: .04em;
    color: var(--muted)
}

.status {
    font-family: var(--mono);
    font-size: .66rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .2rem .5rem;
    border-radius: 50px;
    color: var(--muted);
    border: 1px solid var(--line)
}

.status .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--muted)
}

.status.done {
    color: var(--live);
    border-color: var(--live-bg);
    background: var(--live-bg)
}

.status.done .dot {
    background: var(--live)
}

.plot svg {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    background: var(--inset);
    border: 1px solid var(--line-2)
}

.plot-axis {
    fill: var(--muted);
    font-family: var(--mono);
    font-size: 9px
}

.grid-ln {
    stroke: var(--line-2);
    stroke-width: 1
}

.axis-ln {
    stroke: var(--line);
    stroke-width: 1
}

.loss-ln {
    fill: none;
    stroke: var(--signal);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round
}

.loss-dot {
    fill: var(--signal)
}

.loss-dot-ring {
    fill: var(--signal-soft);
    stroke: var(--signal-line);
    stroke-width: 1
}

.plot-foot {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: .7rem;
    font-family: var(--mono);
    font-size: .72rem
}

.plot-foot .k {
    color: var(--muted)
}

.plot-foot .v {
    color: var(--ink);
    font-weight: 700
}

.plot-foot .epoch {
    color: var(--signal)
}

.plot-foot .loss {
    color: var(--signal)
}

.plot-foot .acc {
    color: var(--live)
}

.acc-ln {
    fill: none;
    stroke: var(--live);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round
}

.acc-dot {
    fill: var(--live)
}

.acc-dot-ring {
    fill: var(--live-bg);
    stroke: var(--live);
    stroke-opacity: .45;
    stroke-width: 1
}

.plot-axis.accx {
    fill: var(--live)
}

.dot-ring {
    transform-box: fill-box;
    transform-origin: center
}

.has-js .dot-ring.pulsing {
    animation: ringPulse 2.4s ease-in-out infinite
}

@keyframes ringPulse {

    0%,
    100% {
        opacity: .85;
        transform: scale(1)
    }

    50% {
        opacity: .3;
        transform: scale(1.55)
    }
}

.legend {
    display: flex;
    gap: 1rem;
    margin-top: .55rem;
    font-family: var(--mono);
    font-size: .66rem;
    color: var(--muted)
}

.legend span {
    display: inline-flex;
    align-items: center;
    gap: .4rem
}

.legend i {
    width: 14px;
    height: 2px;
    border-radius: 2px;
    display: inline-block
}

.overview-grid {
    display: grid;
    grid-template-columns: minmax(0, var(--measure)) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start
}

.prose p {
    font-size: 1.06rem;
    color: var(--ink-2);
    margin-bottom: 1.05rem;
    max-width: var(--measure)
}

.prose p strong {
    color: var(--ink);
    font-weight: 600
}

.notes-col {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding-top: .4rem
}

.note {
    position: relative;
    padding-left: 1.3rem;
    font-size: .86rem;
    color: var(--muted);
    line-height: 1.55
}

.note::before {
    content: attr(data-n);
    position: absolute;
    left: 0;
    top: .05rem;
    font-family: var(--mono);
    font-size: .7rem;
    color: var(--signal);
    font-weight: 700
}

.note b {
    color: var(--ink-2);
    font-weight: 600
}

.stack-row {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 1rem 1.6rem;
    padding: 1.2rem 0;
    border-top: 1px solid var(--line-2)
}

.stack-row:first-of-type {
    border-top: none
}

.stack-label {
    font-family: var(--mono);
    font-size: .78rem;
    letter-spacing: .03em;
    color: var(--ink);
    font-weight: 500;
    padding-top: .12rem
}

.stack-items {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem .5rem
}

.tok {
    font-family: var(--mono);
    font-size: .78rem;
    color: var(--ink-2);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: .28rem .6rem;
    transition: .16s
}

.tok:hover {
    border-color: var(--signal);
    color: var(--signal)
}

.tok.learn {
    color: var(--signal);
    border-style: dashed;
    border-color: var(--signal-line)
}

.stack-foot {
    margin-top: 1.3rem;
    font-family: var(--mono);
    font-size: .72rem;
    color: var(--muted)
}

.stack-foot .d {
    color: var(--signal)
}

.rec {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: .6rem 1.8rem;
    padding: 1.9rem 0;
    border-top: 1px solid var(--line-2)
}

.rec:first-of-type {
    border-top: none;
    padding-top: .4rem
}

.rec-year {
    font-family: var(--mono);
    font-size: .82rem;
    color: var(--signal);
    font-weight: 500;
    line-height: 1.4;
    padding-top: .25rem
}

.rec-role {
    font-size: 1.18rem;
    font-weight: 700;
    letter-spacing: -.01em
}

.rec-org {
    font-family: var(--mono);
    font-size: .8rem;
    color: var(--muted);
    margin: .2rem 0 .9rem
}

.rec-points {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    max-width: 62ch
}

.rec-points li {
    position: relative;
    padding-left: 1.25rem;
    font-size: .95rem;
    color: var(--ink-2);
    line-height: 1.55
}

.rec-points li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--signal);
    font-family: var(--mono);
    font-size: .8rem;
    top: .12rem
}

.rec-points li strong {
    color: var(--ink);
    font-weight: 600
}

.rec-tags {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .9rem
}

.rec-tags li {
    font-family: var(--mono);
    font-size: .68rem;
    color: var(--muted);
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: .16rem .5rem
}

.figs {
    display: flex;
    flex-direction: column
}

.fig {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: .5rem 1.6rem;
    padding: 2.2rem 0;
    border-top: 1px solid var(--line-2)
}

.fig {
    position: relative
}

.fig::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 2.4rem;
    bottom: 2.4rem;
    width: 2px;
    background: var(--signal);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .35s cubic-bezier(.22, 1, .36, 1);
    border-radius: 2px
}

.fig:hover::before {
    transform: scaleY(1)
}

.fig-no {
    transition: color .2s
}

.fig:hover .fig-no {
    color: var(--signal)
}

.fig:first-child {
    border-top: none;
    padding-top: .4rem
}

.fig-no {
    font-family: var(--mono);
    font-size: .78rem;
    color: var(--muted);
    font-weight: 500;
    padding-top: .45rem;
    letter-spacing: .02em
}

.fig-head {
    display: flex;
    align-items: center;
    gap: .8rem;
    flex-wrap: wrap;
    margin-bottom: .35rem
}

.fig-title {
    font-size: 1.32rem;
    font-weight: 800;
    letter-spacing: -.02em
}

.live {
    font-family: var(--mono);
    font-size: .62rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--live);
    background: var(--live-bg);
    border: 1px solid var(--live-bg);
    padding: .16rem .5rem;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: .35rem
}

.live::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--live);
    animation: blip 1.8s ease-in-out infinite
}

@keyframes blip {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: .35
    }
}

.fig-cap {
    font-size: 1.02rem;
    color: var(--ink);
    margin-bottom: 1rem;
    max-width: 54ch
}

.readout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 2.5rem;
    background: var(--inset);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: .8rem 1rem;
    margin-bottom: 1rem
}

.readout>div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .32rem 0;
    border-bottom: 1px dashed var(--line-2)
}

.readout dt {
    font-family: var(--mono);
    font-size: .72rem;
    color: var(--muted)
}

.readout dd {
    font-family: var(--mono);
    font-size: .74rem;
    color: var(--ink);
    font-weight: 500;
    text-align: right
}

.fig-stack {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: 1rem
}

.fig-stack span {
    font-family: var(--mono);
    font-size: .7rem;
    color: var(--muted);
    border: 1px solid var(--line-2);
    border-radius: 5px;
    padding: .16rem .5rem
}

.fig-links {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center
}

.flink {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--mono);
    font-size: .75rem;
    font-weight: 500;
    text-decoration: none;
    padding: .4rem .8rem;
    border-radius: 8px;
    border: 1px solid var(--line);
    color: var(--ink-2);
    transition: .18s
}

.flink:hover {
    transform: translateY(-2px);
    border-color: var(--signal);
    color: var(--signal)
}

.flink.primary {
    background: var(--signal);
    color: #fff;
    border-color: var(--signal)
}

.flink.primary:hover {
    color: #fff;
    box-shadow: var(--shadow)
}

.flink.yt:hover {
    border-color: #e5484d;
    color: #e5484d
}

.notes-toggle {
    font-family: var(--mono);
    font-size: .74rem;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .2rem;
    transition: .18s
}

.notes-toggle:hover {
    color: var(--signal)
}

.notes-toggle .chev {
    transition: transform .25s
}

.notes-toggle[aria-expanded="true"] .chev {
    transform: rotate(180deg)
}

.notes {
    overflow: hidden;
    max-height: 0;
    transition: max-height .35s ease
}

.notes-inner {
    padding-top: .9rem;
    font-size: .94rem;
    color: var(--ink-2);
    line-height: 1.6;
    max-width: 60ch;
    border-top: 1px dashed var(--line-2);
    margin-top: .4rem
}

.rec-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: clamp(1.6rem, 4vw, 3.5rem);
    align-items: start
}

.sub-h {
    font-family: var(--mono);
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 1rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--line)
}

.honors {
    list-style: none;
    display: flex;
    flex-direction: column
}

.honors li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: baseline;
    padding: .7rem 0;
    border-bottom: 1px dashed var(--line-2)
}

.honors .t {
    font-size: .96rem;
    color: var(--ink);
    font-weight: 500
}

.honors .m {
    font-family: var(--mono);
    font-size: .7rem;
    color: var(--muted);
    white-space: nowrap;
    text-align: right
}

.certs {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .2rem
}

.certs li {
    padding: .7rem 0;
    border-bottom: 1px dashed var(--line-2)
}

.certs .t {
    font-size: .94rem;
    color: var(--ink);
    font-weight: 500
}

.certs .m {
    font-family: var(--mono);
    font-size: .7rem;
    color: var(--muted);
    margin-top: .15rem
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.6rem, 4vw, 3.5rem);
    align-items: start
}

.field {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin-bottom: 1rem
}

.field label {
    font-family: var(--mono);
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted)
}

.field input,
.field textarea {
    background: var(--inset);
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: .7rem .85rem;
    color: var(--ink);
    font-family: var(--sans);
    font-size: .95rem;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    width: 100%
}

.field textarea {
    resize: vertical;
    min-height: 120px;
    line-height: 1.55
}

.field input:focus,
.field textarea:focus {
    border-color: var(--signal);
    box-shadow: 0 0 0 3px var(--signal-soft)
}

.field input::placeholder,
.field textarea::placeholder {
    color: var(--muted)
}

.send {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    background: var(--ink);
    color: var(--paper);
    border-radius: 9px;
    padding: .72rem 1.4rem;
    font-weight: 600;
    font-size: .92rem;
    transition: .2s
}

.send:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow)
}

.send:disabled {
    opacity: .55;
    cursor: wait;
    transform: none;
    box-shadow: none
}

.form-status {
    font-family: var(--mono);
    font-size: .76rem;
    min-height: 1.2em;
    margin-top: .7rem;
    color: var(--muted)
}

.form-status.ok {
    color: var(--live)
}

.form-status.err {
    color: #e5484d
}

.channels-h {
    font-family: var(--mono);
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 1rem
}

.email-line {
    font-family: var(--mono);
    font-size: clamp(.95rem, 2.4vw, 1.2rem);
    color: var(--signal);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    cursor: pointer;
    word-break: break-all;
    border-bottom: 1px dashed var(--signal-line);
    padding-bottom: .2rem;
    transition: .18s;
    background: none
}

.email-line:hover {
    filter: brightness(1.1)
}

.copy-state {
    font-family: var(--mono);
    font-size: .7rem;
    color: var(--muted);
    margin-top: .5rem;
    min-height: 1em
}

.channels {
    list-style: none;
    display: flex;
    flex-direction: column;
    margin-top: 1.6rem
}

.channels li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    text-decoration: none;
    padding: .8rem 0;
    border-top: 1px solid var(--line-2);
    font-size: .95rem;
    color: var(--ink);
    transition: .18s
}

.channels li a:hover {
    color: var(--signal);
    padding-left: .3rem
}

.channels .lbl {
    display: flex;
    align-items: center;
    gap: .7rem
}

.channels .h {
    font-family: var(--mono);
    font-size: .7rem;
    color: var(--muted)
}

.channels svg {
    width: 15px;
    height: 15px;
    color: var(--muted)
}

.colophon {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 2.4rem var(--pad) 3rem;
    border-top: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: .5rem;
    font-family: var(--mono);
    font-size: .72rem;
    color: var(--muted)
}

.colophon a {
    color: var(--signal);
    text-decoration: none
}

.colophon a:hover {
    text-decoration: underline
}

#backTop {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: var(--signal);
    font-family: var(--mono);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    z-index: 997;
    opacity: 0;
    transform: translateY(16px) scale(.85);
    transition: opacity .35s, transform .35s;
    display: flex;
    align-items: center;
    justify-content: center
}

#backTop.show {
    opacity: 1;
    transform: none
}

#backTop:hover {
    color: var(--live)
}

#backTop.show:hover {
    transform: translateY(-2px) scale(1.08)
}

#backTop::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: conic-gradient(var(--signal), var(--ink), var(--signal));
    animation: spinBorder 3s linear infinite
}

#backTop::after {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    background: var(--panel)
}

#backTop span {
    position: relative;
    z-index: 1
}

@keyframes spinBorder {
    to {
        transform: rotate(360deg)
    }
}

.mtx-link {
    font-family: var(--mono);
    font-size: .72rem;
    color: var(--muted);
    background: none;
    border: none;
    cursor: pointer;
    transition: color .2s;
    letter-spacing: .04em;
    padding: 0
}

.mtx-link:hover {
    color: var(--live)
}

.cmdk-wrap[hidden] {
    display: none
}

.cmdk-wrap {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 14vh
}

.cmdk-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 11, 13, .5);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    animation: fade .15s ease
}

@keyframes fade {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.cmdk {
    position: relative;
    width: min(560px, 92vw);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6);
    overflow: hidden;
    animation: pop .18s cubic-bezier(.2, .8, .3, 1)
}

@keyframes pop {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(.98)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.cmdk-input-row {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .95rem 1.1rem;
    border-bottom: 1px solid var(--line)
}

.cmdk-input-row .pfx {
    font-family: var(--mono);
    color: var(--signal);
    font-size: .95rem
}

.cmdk-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--ink);
    font-family: var(--mono);
    font-size: .95rem
}

.cmdk-input::placeholder {
    color: var(--muted)
}

.cmdk-esc {
    font-family: var(--mono);
    font-size: .66rem;
    color: var(--muted);
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: .1rem .4rem
}

.cmdk-list {
    max-height: min(56vh, 420px);
    overflow-y: auto;
    padding: .5rem
}

.cmdk-group {
    font-family: var(--mono);
    font-size: .62rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    padding: .7rem .8rem .4rem
}

.cmdk-item {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .6rem .8rem;
    border-radius: 9px;
    cursor: pointer;
    font-size: .9rem;
    color: var(--ink-2)
}

.cmdk-item .ic {
    width: 18px;
    text-align: center;
    font-family: var(--mono);
    color: var(--muted);
    font-size: .85rem
}

.cmdk-item .lbl {
    flex: 1
}

.cmdk-item .meta {
    font-family: var(--mono);
    font-size: .66rem;
    color: var(--muted)
}

.cmdk-item[aria-selected="true"] {
    background: var(--signal-soft);
    color: var(--ink)
}

.cmdk-item[aria-selected="true"] .ic {
    color: var(--signal)
}

.cmdk-empty {
    padding: 1.4rem .8rem;
    font-family: var(--mono);
    font-size: .8rem;
    color: var(--muted);
    text-align: center
}

.has-js .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1)
}

.has-js .reveal.in {
    opacity: 1;
    transform: none
}

.has-js [data-stagger]>* {
    transition-delay: calc(var(--i, 0) * 55ms)
}

.has-js #masthead .m-rise {
    opacity: 0;
    animation: rise .85s cubic-bezier(.2, .7, .2, 1) forwards
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(14px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.m-d1 {
    animation-delay: .12s !important
}

.m-d2 {
    animation-delay: .22s !important
}

.m-d3 {
    animation-delay: .34s !important
}

.m-d4 {
    animation-delay: .46s !important
}

.m-d5 {
    animation-delay: .58s !important
}

.eyebrow {
    position: relative
}

.eyebrow::after {
    content: "";
    position: absolute;
    top: -2px;
    bottom: -2px;
    left: 0;
    width: 2px;
    background: linear-gradient(var(--signal), transparent);
    opacity: 0;
    pointer-events: none
}

.has-js .eyebrow.in::after {
    animation: eyeSweep 1s ease .05s 1
}

@keyframes eyeSweep {
    0% {
        left: 0;
        opacity: .85
    }

    100% {
        left: 100%;
        opacity: 0
    }
}

.readout {
    position: relative;
    overflow: hidden
}

.readout::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--signal-line), transparent);
    opacity: 0;
    pointer-events: none
}

.has-js .fig.in .readout::after {
    animation: readScan 1.15s ease .25s 1
}

@keyframes readScan {
    0% {
        top: 0;
        opacity: .9
    }

    100% {
        top: 100%;
        opacity: 0
    }
}

.rail-fill::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -3px;
    transform: translateX(-50%);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--signal);
    box-shadow: 0 0 0 3px var(--signal-soft)
}

@media (min-width:1240px) {
    .rail {
        display: flex
    }
}

@media (max-width:860px) {
    .mast-grid {
        grid-template-columns: 1fr;
        gap: 2.2rem
    }

    .plot {
        max-width: 460px
    }

    .overview-grid {
        grid-template-columns: 1fr;
        gap: 2rem
    }

    .rec-grid,
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 2.4rem
    }

    .telemetry {
        grid-template-columns: repeat(3, auto);
        gap: 1.3rem 1.8rem
    }
}

@media (max-width:680px) {
    .stack-row {
        grid-template-columns: 1fr;
        gap: .7rem
    }

    .rec {
        grid-template-columns: 1fr;
        gap: .5rem
    }

    .rec-year {
        padding-top: 0
    }

    .fig {
        grid-template-columns: 1fr;
        gap: .6rem
    }

    .fig-no {
        padding-top: 0
    }

    .telemetry {
        grid-template-columns: repeat(2, auto);
        gap: 1.2rem 1.6rem
    }

    .btn-chip .hide-sm {
        display: none
    }

    .topbar {
        padding: .6rem 1.1rem
    }
}

@media (max-width:420px) {
    .telemetry {
        grid-template-columns: 1fr 1fr
    }

    .tele-v {
        font-size: 1.25rem
    }
}

.rec {
    position: relative
}

.rec::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(120px + .9rem);
    width: 2px;
    background: var(--signal-line);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .75s cubic-bezier(.22, 1, .36, 1) .04s;
    pointer-events: none
}

.rec.in::before {
    transform: scaleY(1)
}

.rec::after {
    content: "";
    position: absolute;
    top: 2.15rem;
    left: calc(120px + .9rem);
    margin-left: -3.5px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--paper);
    border: 2px solid var(--signal);
    transform: scale(0);
    transition: transform .5s cubic-bezier(.34, 1.56, .64, 1) .22s, border-color .25s, box-shadow .25s;
    pointer-events: none
}

.rec.in::after {
    transform: scale(1)
}

.rec:first-of-type::after {
    top: .55rem;
    border-color: var(--live)
}

.rec:first-of-type.in::after {
    animation: nodeLive 2.6s ease-in-out infinite .8s
}

@keyframes nodeLive {
    0% {
        box-shadow: 0 0 0 0 var(--live-bg)
    }

    70% {
        box-shadow: 0 0 0 9px transparent
    }

    100% {
        box-shadow: 0 0 0 0 transparent
    }
}

.rec:hover::before {
    background: var(--signal)
}

.rec:hover::after {
    border-color: var(--signal);
    box-shadow: 0 0 0 4px var(--signal-soft)
}

.tok {
    position: relative;
    overflow: hidden
}

.tok:hover {
    background: var(--signal-soft);
    transform: translateY(-1px)
}

.tok::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: var(--signal);
    transform: translateX(-101%);
    transition: transform .3s ease
}

.tok:hover::after {
    transform: translateX(0)
}

.tok.learn {
    animation: learnPulse 2.4s ease-in-out infinite
}

@keyframes learnPulse {

    0%,
    100% {
        border-color: var(--signal-line)
    }

    50% {
        border-color: var(--signal)
    }
}

.honors li,
.certs li {
    position: relative;
    transition: padding-left .2s ease
}

.honors li::before,
.certs li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 2px;
    height: 0;
    background: var(--signal);
    transform: translateY(-50%);
    transition: height .22s ease;
    pointer-events: none
}

.honors li:hover,
.certs li:hover {
    padding-left: .6rem
}

.honors li:hover::before,
.certs li:hover::before {
    height: 60%
}

.honors li:hover .t,
.certs li:hover .t {
    color: var(--signal)
}

.colophon a {
    position: relative
}

.colophon a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .28s ease
}

.colophon a:hover {
    text-decoration: none
}

.colophon a:hover::after {
    transform: scaleX(1)
}

.has-js .grid-bg {
    animation: gridBreathe 11s ease-in-out infinite
}

@keyframes gridBreathe {

    0%,
    100% {
        opacity: .6
    }

    50% {
        opacity: .47
    }
}

@media (max-width:680px) {

    .rec::before,
    .rec::after {
        display: none
    }
}


@media (prefers-reduced-motion:reduce) {

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important
    }

    html {
        scroll-behavior: auto
    }

    .has-js .reveal {
        opacity: 1 !important;
        transform: none !important
    }

    .has-js #masthead .m-rise {
        opacity: 1 !important
    }

    .has-js .reveal .tok {
        opacity: 1 !important;
        transform: none !important
    }

    .replay {
        display: none
    }

    .grid-bg {
        opacity: .4
    }

    .rec::before {
        transform: scaleY(1) !important
    }

    .rec::after {
        transform: scale(1) !important
    }

}

.ask-spark {
    color: var(--signal)
}

.ask-launch {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 80;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--mono);
    font-size: .8rem;
    letter-spacing: .01em;
    color: var(--ink);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 100px;
    padding: .6rem 1rem;
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: border-color .18s, transform .15s, box-shadow .18s
}

.ask-launch:hover {
    border-color: var(--signal);
    transform: translateY(-2px)
}

.ask-modal {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: flex-start;
    justify-content: center
}

.ask-modal[hidden] {
    display: none
}

.ask-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 10, 12, .55);
    backdrop-filter: blur(3px);
    animation: askFade .2s ease
}

@keyframes askFade {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.ask-panel {
    position: relative;
    width: min(620px, 92vw);
    margin-top: clamp(3rem, 11vh, 7rem);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .35);
    overflow: hidden;
    animation: askRise .26s cubic-bezier(.22, 1, .36, 1)
}

@keyframes askRise {
    from {
        opacity: 0;
        transform: translateY(14px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.ask-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.2rem;
    border-bottom: 1px solid var(--line-2)
}

.ask-title {
    font-family: var(--mono);
    font-size: .92rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: .5rem
}

.ask-x {
    font-size: 1.5rem;
    line-height: 1;
    color: var(--muted);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 .2rem;
    transition: color .15s
}

.ask-x:hover {
    color: var(--ink)
}

.ask-inputwrap {
    display: flex;
    gap: .5rem;
    padding: 1rem 1.2rem .4rem
}

.ask-input {
    flex: 1;
    min-width: 0;
    font-family: var(--sans);
    font-size: 1rem;
    color: var(--ink);
    background: var(--inset);
    border: 1px solid var(--line-2);
    border-radius: 9px;
    padding: .7rem .9rem;
    transition: border-color .18s, box-shadow .18s
}

.ask-input:focus {
    outline: none;
    border-color: var(--signal);
    box-shadow: 0 0 0 3px var(--signal-soft)
}

.ask-send {
    font-size: 1.1rem;
    color: #fff;
    background: var(--signal);
    border: none;
    border-radius: 9px;
    width: 46px;
    flex: none;
    cursor: pointer;
    transition: filter .15s
}

.ask-send:hover {
    filter: brightness(1.08)
}

.ask-sugs {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    padding: .6rem 1.2rem 1rem
}

.ask-sug {
    font-size: .8rem;
    color: var(--ink-2);
    background: var(--inset);
    border: 1px solid var(--line-2);
    border-radius: 100px;
    padding: .35rem .7rem;
    cursor: pointer;
    transition: color .15s, border-color .15s
}

.ask-sug:hover {
    color: var(--signal);
    border-color: var(--signal-line)
}

.ask-body {
    padding: 0 1.2rem 1.2rem;
    overflow-y: auto;
    flex: 1
}

.ask-hello {
    font-size: .92rem;
    color: var(--muted);
    line-height: 1.6
}

.ask-note {
    display: block;
    font-family: var(--mono);
    font-size: .72rem;
    color: var(--ink-2);
    margin-top: .5rem
}

.ask-load {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-family: var(--mono);
    font-size: .82rem;
    color: var(--muted);
    padding: .6rem 0
}

.ask-spin {
    width: 15px;
    height: 15px;
    border: 2px solid var(--line-2);
    border-top-color: var(--signal);
    border-radius: 50%;
    animation: askSpin .8s linear infinite
}

@keyframes askSpin {
    to {
        transform: rotate(360deg)
    }
}

.ask-q {
    font-family: var(--mono);
    font-size: .82rem;
    color: var(--signal);
    margin: .4rem 0 .6rem;
    padding-left: .7rem;
    border-left: 2px solid var(--signal-line)
}

.ask-a {
    font-size: .94rem;
    color: var(--ink);
    line-height: 1.62
}

.ask-a p {
    margin: 0 0 .8rem
}

.ask-src {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin-top: .6rem
}

.ask-srclbl {
    font-family: var(--mono);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
    margin-right: .2rem
}

.ask-chip {
    font-family: var(--mono);
    font-size: .72rem;
    color: var(--ink-2);
    text-decoration: none;
    background: var(--inset);
    border: 1px solid var(--line-2);
    border-radius: 6px;
    padding: .25rem .5rem;
    transition: color .15s, border-color .15s
}

.ask-chip:hover {
    color: var(--signal);
    border-color: var(--signal-line)
}

.ask-foot {
    font-family: var(--mono);
    font-size: .7rem;
    color: var(--muted);
    padding: .7rem 1.2rem;
    border-top: 1px solid var(--line-2)
}

@media (max-width:560px) {
    .ask-launch {
        left: 12px;
        bottom: 12px;
        font-size: .74rem;
        padding: .5rem .8rem
    }
}

.ask-reset {
    margin-top: .9rem;
    font-family: var(--mono);
    font-size: .76rem;
    color: var(--ink-2);
    background: var(--inset);
    border: 1px solid var(--line-2);
    border-radius: 100px;
    padding: .35rem .8rem;
    cursor: pointer;
    transition: color .15s, border-color .15s;
}

.ask-reset:hover {
    color: var(--signal);
    border-color: var(--signal-line);
}

.ask-loading {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: .2rem 1.2rem .5rem;
    padding: .55rem .8rem;
    font-family: var(--mono);
    font-size: .74rem;
    color: var(--ink-2);
    background: var(--inset);
    border: 1px solid var(--line-2);
    border-radius: 9px;
}

.ask-loading[hidden] {
    display: none;
}

.ask-loadbar {
    flex: 1;
    height: 4px;
    border-radius: 3px;
    background: var(--line-2);
    overflow: hidden;
}

.ask-loadbar i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 3px;
    background: var(--signal);
    transition: width .25s ease;
}

/* ——— assistant: chat thread ——— */

.ask-head-r {
    display: inline-flex;
    align-items: center;
    gap: .6rem
}

.ask-clear {
    font-family: var(--mono);
    font-size: .7rem;
    color: var(--muted);
    border: 1px solid var(--line-2);
    border-radius: 100px;
    padding: .25rem .6rem;
    transition: color .15s, border-color .15s
}

.ask-clear:hover {
    color: var(--signal);
    border-color: var(--signal-line)
}

.ask-clear[hidden] {
    display: none
}

.ask-panel .ask-body {
    padding: 1rem 1.2rem 1.1rem
}

.ask-hello p {
    margin: 0
}

.ask-hello[hidden] {
    display: none
}

.ask-body .ask-sugs {
    padding: .7rem 0 .1rem
}

.ask-sugs[hidden] {
    display: none
}

.ask-thread {
    display: flex;
    flex-direction: column;
    gap: .35rem
}

.ask-thread .ask-q {
    margin: .55rem 0 .5rem
}

.ask-typing {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-family: var(--mono);
    font-size: .78rem;
    color: var(--muted);
    padding: .15rem 0 .4rem
}

.ask-a-txt.streaming p:last-child::after {
    content: "▍";
    color: var(--signal);
    margin-left: 2px;
    animation: askBlink 1s steps(2) infinite
}

@keyframes askBlink {
    50% {
        opacity: 0
    }
}

.ask-a .ask-fu {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: .2rem 0 .5rem
}

.ask-fu button {
    font-size: .76rem;
    color: var(--ink-2);
    background: var(--inset);
    border: 1px solid var(--line-2);
    border-radius: 100px;
    padding: .3rem .65rem;
    transition: color .15s, border-color .15s
}

.ask-fu button:hover {
    color: var(--signal);
    border-color: var(--signal-line)
}

.ask-panel .ask-inputwrap {
    position: relative;
    border-top: 1px solid var(--line-2);
    padding: .85rem 1.2rem .95rem
}

/* ——— assistant: ghost-bot mascot ——— */

.ask-pet {
    position: absolute;
    right: 64px;
    bottom: calc(100% - 1.2rem);
    width: 44px;
    height: 44px;
    pointer-events: none;
    z-index: 2;
    transition: transform .3s ease;
}

.ask-pet svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.ask-pet-mini {
    width: 20px;
    height: 20px;
    flex: none;
    overflow: visible;
}

.pet-f,
.pet-eyes,
.pet-smile,
.pet-q {
    transform-box: fill-box;
    transform-origin: 50% 50%;
}

.pet-body {
    fill: #ffffff;
    stroke: #8e999e;
    stroke-width: 1.8;
}

/* light theme: lift the white ghost off the white panel */
.ask-pet svg,
.ask-pet-mini {
    filter: drop-shadow(0 2px 5px rgba(20, 24, 26, .28));
}

html[data-theme="dark"] .pet-body {
    fill: #e9eef2;
    stroke: rgba(111, 141, 255, .4);
}

html[data-theme="dark"] .ask-pet svg,
html[data-theme="dark"] .ask-pet-mini {
    filter: drop-shadow(0 0 6px rgba(111, 141, 255, .25));
}

.pet-face {
    fill: #14181a;
}

.pet-eyes ellipse {
    fill: var(--signal);
}

.pet-eyes {
    filter: drop-shadow(0 0 2.5px var(--signal));
    animation: petBlink 4.6s infinite;
}

.pet-smile {
    opacity: 0;
    filter: drop-shadow(0 0 2.5px var(--signal));
}

.pet-smile path {
    fill: none;
    stroke: var(--signal);
    stroke-width: 2.4;
    stroke-linecap: round;
}

.pet-gem {
    fill: var(--signal);
    opacity: .85;
}

.pet-q {
    font: 700 14px var(--mono);
    fill: var(--signal);
    opacity: 0;
}

.pet-f {
    animation: petBob 3.4s ease-in-out infinite;
}

@keyframes petBob {

    0%,
    100% {
        transform: translateY(0) rotate(0deg)
    }

    50% {
        transform: translateY(-2.5px) rotate(-2deg)
    }
}

@keyframes petBlink {

    0%,
    91%,
    100% {
        transform: scaleY(1)
    }

    94% {
        transform: scaleY(.15)
    }
}

/* typing: lean over the input, bob faster, eyes reading the text below */
.ask-pet.typing {
    transform: translateY(2px) rotate(-4deg)
}

.ask-pet.typing .pet-f {
    animation-duration: 1.1s
}

.ask-pet.typing .pet-eyes {
    animation: none;
    transform: translate(-1px, 1.5px);
}

/* per-keystroke reactions: a press-bounce on write, a head-shake on delete */
.ask-pet.key svg {
    animation: petKey .18s ease;
}

.ask-pet.erase svg {
    animation: petErase .26s ease;
}

.ask-pet.erase .pet-eyes {
    animation: none;
    transform: translateY(1px) scaleY(.45);
}

@keyframes petKey {

    0%,
    100% {
        transform: translateY(0) scale(1)
    }

    40% {
        transform: translateY(3px) scale(.95)
    }
}

@keyframes petErase {

    0%,
    100% {
        transform: translateX(0) rotate(0)
    }

    30% {
        transform: translateX(-2.5px) rotate(-6deg)
    }

    70% {
        transform: translateX(2.5px) rotate(6deg)
    }
}

/* thinking: eyes up + a floating question mark (like the ref sheet's "?" pose) */
.ask-pet.think .pet-eyes {
    animation: none;
    transform: translateY(-1.5px)
}

.ask-pet.think .pet-q {
    opacity: 1;
    animation: petQ 1.5s ease-in-out infinite
}

@keyframes petQ {

    0%,
    100% {
        transform: translateY(0);
        opacity: .35
    }

    50% {
        transform: translateY(-3px);
        opacity: 1
    }
}

/* talking: chattering eyes while the answer streams */
.ask-pet.talk .pet-eyes {
    animation: petTalk .55s ease-in-out infinite
}

@keyframes petTalk {

    0%,
    100% {
        transform: scaleY(1)
    }

    50% {
        transform: scaleY(.5)
    }
}

/* idle nudge: speech bubble + attention wiggle after 30s of silence */
.pet-bub {
    position: absolute;
    bottom: calc(100% + 3px);
    right: -6px;
    white-space: nowrap;
    font-family: var(--mono);
    font-size: .68rem;
    color: var(--paper);
    background: var(--ink);
    border-radius: 9px 9px 3px 9px;
    padding: .34rem .62rem;
    box-shadow: var(--shadow);
    opacity: 0;
    transform: translateY(5px) scale(.9);
    transform-origin: bottom right;
    transition: opacity .25s ease, transform .25s ease;
}

.ask-pet.nudge .pet-bub {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.ask-pet.nudge svg {
    animation: petKnock .95s ease 2;
}

@keyframes petKnock {

    0%,
    100% {
        transform: translateY(0) rotate(0)
    }

    18% {
        transform: translateY(-4.5px) rotate(-7deg)
    }

    38% {
        transform: translateY(1px) rotate(5deg)
    }

    58% {
        transform: translateY(-3px) rotate(-4deg)
    }

    78% {
        transform: translateY(.5px) rotate(2deg)
    }
}

/* happy: ^ ^ eyes + a little hop when the answer lands */
.ask-pet.happy .pet-eyes {
    opacity: 0
}

.ask-pet.happy .pet-smile {
    opacity: 1
}

.ask-pet.happy .pet-f {
    animation: petHop .9s ease-in-out
}

@keyframes petHop {

    0%,
    100% {
        transform: translateY(0)
    }

    35% {
        transform: translateY(-6px) rotate(3deg)
    }

    65% {
        transform: translateY(-1px)
    }
}

.fig-tele {
    margin-left: auto;
    font-family: var(--mono);
    font-size: .68rem;
    color: var(--muted);
    white-space: nowrap
}

@media (max-width:560px) {
    .fig-tele {
        display: none
    }
}

.pipe {
    margin: .2rem 0 1.1rem
}

.pipe-track {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem
}

.pipe-stage {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--mono);
    font-size: .72rem;
    color: var(--ink-2);
    background: var(--inset);
    border: 1px solid var(--line-2);
    border-radius: 7px;
    padding: .35rem .55rem;
    transition: color .15s, border-color .15s, background .15s
}

.pipe-stage .pn {
    color: var(--muted);
    font-size: .64rem
}

.pipe-stage:hover {
    color: var(--signal);
    border-color: var(--signal-line)
}

.pipe-stage[aria-selected="true"] {
    color: var(--signal);
    border-color: var(--signal);
    background: var(--signal-soft)
}

.pipe-stage[aria-selected="true"] .pn {
    color: var(--signal)
}

.pipe-arrow {
    color: var(--muted);
    font-size: .72rem
}

.pipe-detail {
    margin-top: .7rem;
    border: 1px solid var(--line-2);
    border-left: 2px solid var(--signal);
    border-radius: 0 8px 8px 0;
    background: var(--inset);
    padding: .8rem .95rem
}

.pipe-detail[hidden] {
    display: none
}

.pipe-txt {
    font-size: .88rem;
    color: var(--ink-2);
    line-height: 1.6;
    margin: 0
}

.pipe-txt b {
    color: var(--ink);
    font-family: var(--mono);
    font-size: .74rem;
    font-weight: 600
}

.pipe-media {
    margin-top: .7rem
}

.pipe-media img {
    width: 100%;
    height: auto;
    border: 1px solid var(--line-2);
    border-radius: 6px;
    background: #fff
}

.pipe-cap {
    display: inline-block;
    margin-top: .5rem;
    font-family: var(--mono);
    font-size: .66rem;
    color: var(--muted);
    text-decoration: none;
    border-bottom: 1px solid var(--line)
}

.pipe-cap:hover {
    color: var(--signal);
    border-color: var(--signal-line)
}

.pipe-hint {
    margin-top: .55rem;
    font-family: var(--mono);
    font-size: .66rem;
    color: var(--muted)
}

.pipe-hint a {
    color: inherit
}

.pipe-hint a:hover {
    color: var(--signal)
}

.demo {
    margin-top: .9rem;
    border: 1px solid var(--line-2);
    border-radius: 10px;
    overflow: hidden;
    background: var(--inset)
}

.demo[hidden] {
    display: none
}

.demo-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .6rem .9rem;
    border-bottom: 1px solid var(--line-2);
    font-family: var(--mono);
    font-size: .7rem;
    color: var(--ink-2)
}

.demo-title {
    display: inline-flex;
    align-items: center;
    gap: .5rem
}

.demo-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--live);
    box-shadow: 0 0 0 3px var(--live-bg);
    flex: none
}

.demo-ext {
    color: var(--muted);
    text-decoration: none;
    white-space: nowrap
}

.demo-ext:hover {
    color: var(--signal)
}

.demo-frame {
    display: block;
    width: 100%;
    height: 520px;
    border: 0;
    background: var(--paper)
}

.demo-note {
    padding: .55rem .9rem;
    font-family: var(--mono);
    font-size: .66rem;
    color: var(--muted);
    border-top: 1px solid var(--line-2)
}

@media (max-width:680px) {
    .demo-frame {
        height: 440px
    }
}

.posts {
    list-style: none;
    display: flex;
    flex-direction: column;
    max-width: 46rem
}

.posts li {
    border-bottom: 1px dashed var(--line-2)
}

.posts a {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: baseline;
    padding: .85rem 0;
    text-decoration: none
}

.posts .t {
    font-weight: 600;
    letter-spacing: -.01em;
    transition: color .15s
}

.posts a:hover .t {
    color: var(--signal)
}

.posts .m {
    font-family: var(--mono);
    font-size: .7rem;
    color: var(--muted);
    white-space: nowrap
}

.posts-foot {
    margin-top: 1.1rem;
    font-family: var(--mono);
    font-size: .74rem;
    color: var(--muted)
}

.posts-foot .d {
    color: var(--signal)
}

.posts-foot a {
    color: var(--ink-2);
    text-decoration: none;
    border-bottom: 1px solid var(--line)
}

.posts-foot a:hover {
    color: var(--signal);
    border-color: var(--signal-line)
}

@media (max-width:560px) {
    .posts a {
        flex-direction: column;
        gap: .15rem
    }
}