:root {
    --paper: #f1f2f5;
    --sheet: #ffffff;
    --rule: #c6cad3;
    --ink: #151820;
    --ink2: #5c6373;
    --violet: #6d3be0;
    --pink: #de1b76;
    --sans: "IBM Plex Sans", system-ui, sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, monospace;
    --gutter: clamp(1rem, 4vw, 2.75rem);
    --pin: #0c0e14;
    --solder: #de1b76;
    --electron: #ff6bb0;
    --scan: rgba(255, 255, 255, 0.95);
    --bloom: rgba(255, 255, 255, 0.2);
    /*no-JS fallback*/
    --iron-v:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg stroke-linecap='round' fill='none'%3E%3Cpath d='M16 29 L16 15' stroke='%23fff' stroke-width='9'/%3E%3Cpath d='M16 13 L16 5' stroke='%23fff' stroke-width='7'/%3E%3Cpath d='M16 29 L16 15' stroke='%23151820' stroke-width='6'/%3E%3Cpath d='M16 16 L16 12' stroke='%236D3BE0' stroke-width='6'/%3E%3Cpath d='M16 12 L16 5' stroke='%23B9BEC9' stroke-width='3.5'/%3E%3C/g%3E%3Ccircle cx='16' cy='3.5' r='2.6' fill='%23fff'/%3E%3Ccircle cx='16' cy='3.5' r='1.7' fill='%23DE1B76'/%3E%3C/svg%3E") 16 2,
        pointer;
    /* safari backups of pointer and crosshair */
    --iron:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg stroke-linecap='round' fill='none'%3E%3Cpath d='M29 3 L17 15' stroke='%23fff' stroke-width='9'/%3E%3Cpath d='M13 19 L5 27' stroke='%23fff' stroke-width='7'/%3E%3Cpath d='M29 3 L17 15' stroke='%23151820' stroke-width='6'/%3E%3Cpath d='M17 15 L13 19' stroke='%236D3BE0' stroke-width='6'/%3E%3Cpath d='M13 19 L5 27' stroke='%23B9BEC9' stroke-width='3.5'/%3E%3C/g%3E%3Ccircle cx='4.5' cy='27.5' r='2.4' fill='%23fff'/%3E%3Ccircle cx='4.5' cy='27.5' r='1.6' fill='%23DE1B76'/%3E%3C/svg%3E") 4 28,
        crosshair;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    cursor: var(--iron);
}

button {
    cursor: var(--iron);
}

a {
    cursor: var(--iron-v);
}

.sheet {
    max-width: 1000px;
    margin: 0 auto;
    background: var(--sheet);
    border-left: 1px solid var(--rule);
    border-right: 1px solid var(--rule);
    min-height: 100vh;
}

a {
    color: var(--violet);
}

/* masthead */
.masthead {
    background: var(--ink);
    color: var(--paper);
    padding: 1.1rem var(--gutter);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.mh-r {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.tgl {
    display: flex;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: none;
    font-family: var(--mono);
    font-size: 0.5625rem;
    letter-spacing: 0.12em;
    line-height: 1;
}

.tgl span {
    display: block;
    padding: 0.34rem 0.5rem;
    color: #9aa0ae;
    transition:
        background 0.15s,
        color 0.15s;
}

.tgl[aria-pressed="false"] .l,
.tgl[aria-pressed="true"] .d {
    background: var(--paper);
    color: var(--ink);
}

.tgl:hover {
    border-color: var(--pink);
}

.masthead .pn {
    font-family: var(--mono);
    font-weight: 600;
    font-size: 1.0625rem;
    letter-spacing: 0.04em;
}

.masthead .rev {
    font-family: var(--mono);
    font-size: 0.6875rem;
    color: #9aa0ae;
    letter-spacing: 0.06em;
}

.title {
    padding: 1.5rem var(--gutter) 1.25rem;
    border-bottom: 3px solid var(--ink);
}

.title h1 {
    font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem);
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.015em;
}

.title .sub {
    font-family: var(--mono);
    font-size: 0.85rem;
    color: var(--ink2);
    margin-top: 0.35rem;
}

/* opener */
.opener {
    display: grid;
    grid-template-columns: 1fr 1fr 18rem;
    border-bottom: 1px solid var(--rule);
}

.col {
    padding: 1.5rem var(--gutter);
    border-right: 1px solid var(--rule);
}

.col:last-child {
    border-right: 0;
}

.opener h4,
.pkgwrap h4 {
    font-family: var(--mono);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--violet);
    margin: 0 0 0.8rem;
}

.opener ul {
    margin: 0;
    padding-left: 1.05rem;
}

.opener li {
    margin-bottom: 0.4rem;
    font-size: 0.875rem;
}

.opener li::marker {
    color: var(--pink);
}

.opener p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--ink2);
}

.pkgwrap {
    padding: 1.5rem var(--gutter);
}

/* chip stage */
.stage {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    max-width: 15rem;
    margin: 0 auto;
}

.traces {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: visible;
}

.traces path {
    fill: none;
    stroke: var(--violet);
    stroke-width: 1;
    stroke-linecap: square;
    stroke-linejoin: miter;
}

.traces circle {
    fill: var(--violet);
}

.flow {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    overflow: visible;
}

.flow .route {
    fill: none;
    stroke: var(--violet);
    stroke-width: 0.5;
    opacity: 0.14;
}

.flow .el {
    fill: none;
    stroke: var(--electron);
    stroke-width: 1.3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.flow .glow {
    fill: none;
    stroke: var(--electron);
    stroke-width: 4.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.2;
}

.pkg {
    position: absolute;
    left: 19%;
    top: 19%;
    width: 62%;
    height: 62%;
    z-index: 1;
    background: var(--sheet);
    border: 2px solid var(--ink);
}

.die {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #e7e9ed;
}

.die img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: relative;
    z-index: 1;
}

.die .ph {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mono);
    font-size: 0.625rem;
    color: var(--ink2);
    text-align: center;
    line-height: 1.8;
    padding: 0.5rem;
}

.p1 {
    position: absolute;
    top: 5%;
    left: 5%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pink);
    z-index: 4;
}

.pin {
    position: absolute;
    z-index: 2;
    padding: 0;
    border: 0;
    background: var(--pin);
    transform: translate(-50%, -50%);
    transition:
        background 0.15s,
        box-shadow 0.15s;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    overflow: visible;
}

.pin.h {
    width: 14%;
    height: 4%;
}

.pin.v {
    width: 4%;
    height: 14%;
}

.pin:hover {
    box-shadow: 0 0 0 3px rgba(222, 27, 118, 0.22);
}

.pin.on {
    background: var(--violet);
}

/* hold-to-solder: the pin itself is the bar, loading black to pink in place */
.pin i {
    position: absolute;
    inset: 0;
    display: block;
    transition: transform 0.16s ease-out;
}

.pin.h i {
    transform: scaleX(0);
    transform-origin: left;
    background: var(--solder);
}

.pin.v i {
    transform: scaleY(0);
    transform-origin: top;
    background: var(--solder);
}

.pin.heat.h i {
    transform: scaleX(1);
    transition: transform 1s linear;
}

.pin.heat.v i {
    transform: scaleY(1);
    transition: transform 1s linear;
}

.pin.on i {
    display: none;
}

.pin.heat {
    animation: solder 1s linear forwards;
}

@keyframes solder {
    0.0% {
        transform: translate(calc(-50% + 0px), calc(-50% + 0px));
        filter: brightness(1);
        box-shadow: 0 0 0px 0px rgba(222, 27, 118, 0);
    }

    5.6% {
        transform: translate(calc(-50% + -0px), calc(-50% + 0px));
        filter: brightness(1.05);
        box-shadow: 0 0 0.4px 0.1px rgba(222, 27, 118, 0.03);
    }

    11.1% {
        transform: translate(calc(-50% + 0px), calc(-50% + -0.02px));
        filter: brightness(1.09);
        box-shadow: 0 0 0.9px 0.3px rgba(222, 27, 118, 0.06);
    }

    16.7% {
        transform: translate(calc(-50% + 0.03px), calc(-50% + 0.04px));
        filter: brightness(1.14);
        box-shadow: 0 0 1.3px 0.4px rgba(222, 27, 118, 0.09);
    }

    22.2% {
        transform: translate(calc(-50% + -0.08px), calc(-50% + -0.01px));
        filter: brightness(1.19);
        box-shadow: 0 0 1.8px 0.6px rgba(222, 27, 118, 0.12);
    }

    27.8% {
        transform: translate(calc(-50% + 0.11px), calc(-50% + -0.07px));
        filter: brightness(1.24);
        box-shadow: 0 0 2.2px 0.7px rgba(222, 27, 118, 0.15);
    }

    33.3% {
        transform: translate(calc(-50% + -0.05px), calc(-50% + 0.18px));
        filter: brightness(1.28);
        box-shadow: 0 0 2.7px 0.9px rgba(222, 27, 118, 0.18);
    }

    38.9% {
        transform: translate(calc(-50% + -0.12px), calc(-50% + -0.23px));
        filter: brightness(1.33);
        box-shadow: 0 0 3.1px 1px rgba(222, 27, 118, 0.21);
    }

    44.4% {
        transform: translate(calc(-50% + 0.32px), calc(-50% + 0.11px));
        filter: brightness(1.38);
        box-shadow: 0 0 3.6px 1.2px rgba(222, 27, 118, 0.24);
    }

    50.0% {
        transform: translate(calc(-50% + -0.39px), calc(-50% + 0.17px));
        filter: brightness(1.43);
        box-shadow: 0 0 4px 1.3px rgba(222, 27, 118, 0.28);
    }

    55.6% {
        transform: translate(calc(-50% + 0.22px), calc(-50% + -0.48px));
        filter: brightness(1.47);
        box-shadow: 0 0 4.4px 1.4px rgba(222, 27, 118, 0.31);
    }

    61.1% {
        transform: translate(calc(-50% + 0.2px), calc(-50% + 0.6px));
        filter: brightness(1.52);
        box-shadow: 0 0 4.9px 1.6px rgba(222, 27, 118, 0.34);
    }

    66.7% {
        transform: translate(calc(-50% + -0.66px), calc(-50% + -0.37px));
        filter: brightness(1.57);
        box-shadow: 0 0 5.3px 1.7px rgba(222, 27, 118, 0.37);
    }

    72.2% {
        transform: translate(calc(-50% + 0.86px), calc(-50% + -0.2px));
        filter: brightness(1.61);
        box-shadow: 0 0 5.8px 1.9px rgba(222, 27, 118, 0.4);
    }

    77.8% {
        transform: translate(calc(-50% + -0.58px), calc(-50% + 0.85px));
        filter: brightness(1.66);
        box-shadow: 0 0 6.2px 2px rgba(222, 27, 118, 0.43);
    }

    83.3% {
        transform: translate(calc(-50% + -0.17px), calc(-50% + -1.17px));
        filter: brightness(1.71);
        box-shadow: 0 0 6.7px 2.2px rgba(222, 27, 118, 0.46);
    }

    88.9% {
        transform: translate(calc(-50% + 1.04px), calc(-50% + 0.85px));
        filter: brightness(1.76);
        box-shadow: 0 0 7.1px 2.3px rgba(222, 27, 118, 0.49);
    }

    94.4% {
        transform: translate(calc(-50% + -1.51px), calc(-50% + 0.09px));
        filter: brightness(1.8);
        box-shadow: 0 0 7.6px 2.5px rgba(222, 27, 118, 0.52);
    }

    100.0% {
        transform: translate(calc(-50% + 1.18px), calc(-50% + -1.22px));
        filter: brightness(1.85);
        box-shadow: 0 0 8px 2.6px rgba(222, 27, 118, 0.55);
    }
}

.pin.rad::after {
    content: "";
    position: absolute;
    inset: -1px;
    border: 2px solid var(--solder);
    border-radius: 50%;
    pointer-events: none;
    animation: radiate 0.5s ease-out forwards;
}

@keyframes radiate {
    from {
        transform: scale(0.7);
        opacity: 0.95;
    }

    to {
        transform: scale(5);
        opacity: 0;
    }
}

/* power-on animation */
.pin.charge {
    background: var(--solder);
    animation: charge 0.95s linear forwards;
}

@keyframes charge {
    0.0% {
        transform: translate(calc(-50% + 0px), calc(-50% + 0px));
        filter: brightness(1);
        box-shadow: 0 0 0px 0px rgba(255, 95, 158, 0);
    }

    7.1% {
        transform: translate(calc(-50% + -0.01px), calc(-50% + 0.01px));
        filter: brightness(1.09);
        box-shadow: 0 0 0.8px 0.2px rgba(255, 95, 158, 0.05);
    }

    14.3% {
        transform: translate(calc(-50% + 0px), calc(-50% + -0.04px));
        filter: brightness(1.18);
        box-shadow: 0 0 1.6px 0.5px rgba(255, 95, 158, 0.11);
    }

    21.4% {
        transform: translate(calc(-50% + 0.05px), calc(-50% + 0.07px));
        filter: brightness(1.27);
        box-shadow: 0 0 2.4px 0.7px rgba(255, 95, 158, 0.16);
    }

    28.6% {
        transform: translate(calc(-50% + -0.15px), calc(-50% + -0.03px));
        filter: brightness(1.36);
        box-shadow: 0 0 3.1px 1px rgba(255, 95, 158, 0.21);
    }

    35.7% {
        transform: translate(calc(-50% + 0.2px), calc(-50% + -0.13px));
        filter: brightness(1.45);
        box-shadow: 0 0 3.9px 1.2px rgba(255, 95, 158, 0.27);
    }

    42.9% {
        transform: translate(calc(-50% + -0.09px), calc(-50% + 0.34px));
        filter: brightness(1.54);
        box-shadow: 0 0 4.7px 1.5px rgba(255, 95, 158, 0.32);
    }

    50.0% {
        transform: translate(calc(-50% + -0.22px), calc(-50% + -0.42px));
        filter: brightness(1.62);
        box-shadow: 0 0 5.5px 1.7px rgba(255, 95, 158, 0.38);
    }

    57.1% {
        transform: translate(calc(-50% + 0.58px), calc(-50% + 0.21px));
        filter: brightness(1.71);
        box-shadow: 0 0 6.3px 1.9px rgba(255, 95, 158, 0.43);
    }

    64.3% {
        transform: translate(calc(-50% + -0.72px), calc(-50% + 0.31px));
        filter: brightness(1.8);
        box-shadow: 0 0 7.1px 2.2px rgba(255, 95, 158, 0.48);
    }

    71.4% {
        transform: translate(calc(-50% + 0.4px), calc(-50% + -0.88px));
        filter: brightness(1.89);
        box-shadow: 0 0 7.9px 2.4px rgba(255, 95, 158, 0.54);
    }

    78.6% {
        transform: translate(calc(-50% + 0.36px), calc(-50% + 1.12px));
        filter: brightness(1.98);
        box-shadow: 0 0 8.6px 2.7px rgba(255, 95, 158, 0.59);
    }

    85.7% {
        transform: translate(calc(-50% + -1.22px), calc(-50% + -0.69px));
        filter: brightness(2.07);
        box-shadow: 0 0 9.4px 2.9px rgba(255, 95, 158, 0.64);
    }

    92.9% {
        transform: translate(calc(-50% + 1.6px), calc(-50% + -0.37px));
        filter: brightness(2.16);
        box-shadow: 0 0 10.2px 3.2px rgba(255, 95, 158, 0.7);
    }

    100.0% {
        transform: translate(calc(-50% + -1.07px), calc(-50% + 1.57px));
        filter: brightness(2.25);
        box-shadow: 0 0 11px 3.4px rgba(255, 95, 158, 0.75);
    }
}

.pin.live {
    background: var(--solder);
    box-shadow: 0 0 5px 1px rgba(255, 95, 158, 0.45);
}

.flash {
    position: absolute;
    left: 19%;
    top: 19%;
    width: 62%;
    height: 62%;
    z-index: 9;
    pointer-events: none;
    overflow: hidden;
    opacity: 0;
    background: var(--bloom);
}

.flash.go {
    animation: bloom 0.82s ease-out forwards;
}

@keyframes bloom {
    0% {
        opacity: 0;
    }

    16% {
        opacity: 1;
    }

    55% {
        opacity: 0.55;
    }

    100% {
        opacity: 0;
    }
}

.flash::after {
    content: "";
    position: absolute;
    left: -8%;
    width: 116%;
    height: 30%;
    top: -34%;
    opacity: 0;
    background: linear-gradient(180deg,
            transparent 0,
            rgba(255, 255, 255, 0.06) 46%,
            var(--scan) 76%,
            var(--scan) 80%,
            rgba(255, 255, 255, 0.1) 84%,
            transparent 100%);
}

.flash.go::after {
    animation: sweep 0.82s cubic-bezier(0.32, 0, 0.2, 1) forwards;
}

@keyframes sweep {
    0% {
        top: -34%;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

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

.pkgcap {
    font-family: var(--mono);
    font-size: 0.625rem;
    color: var(--ink2);
    margin-top: 1rem;
    letter-spacing: 0.06em;
    text-align: center;
}

.pkgcap b {
    color: var(--pink);
    font-weight: 500;
}

/* die map */
.die.done img {
    filter: grayscale(1) contrast(1.58) brightness(0.85);
}

.dm {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
}

.die.done .dm {
    animation: reveal 0.82s cubic-bezier(0.32, 0, 0.2, 1) forwards;
}

@keyframes reveal {
    0% {
        opacity: 1;
        clip-path: inset(0 0 100% 0);
    }

    100% {
        opacity: 1;
        clip-path: inset(0 0 0 0);
    }
}

.dm-color {
    z-index: 2;
    mix-blend-mode: color;
}

.dm-shade {
    z-index: 3;
    mix-blend-mode: multiply;
}

.dm-tex {
    z-index: 4;
    mix-blend-mode: overlay;
}

.dm b {
    position: absolute;
    display: block;
}

/* sections */
section {
    padding: 1.9rem var(--gutter);
    border-bottom: 1px solid var(--rule);
}

h2 {
    font-size: 0.9375rem;
    font-weight: 700;
    margin: 0 0 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

h2 .n {
    font-family: var(--mono);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--sheet);
    background: var(--ink);
    padding: 0.15rem 0.45rem;
}

.lede {
    margin: 0;
    max-width: 70ch;
    color: var(--ink2);
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

th {
    font-family: var(--mono);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink2);
    text-align: left;
    padding: 0 0.9rem 0.45rem 0;
    border-bottom: 2px solid var(--ink);
}

td {
    padding: 0.65rem 0.9rem 0.65rem 0;
    border-bottom: 1px solid var(--rule);
    vertical-align: top;
}

tr:last-child td {
    border-bottom: 0;
}

td.k {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--violet);
    white-space: nowrap;
    width: 9.5rem;
}

td.d {
    font-family: var(--mono);
    font-size: 0.6875rem;
    color: var(--ink2);
    white-space: nowrap;
    width: 9rem;
}

td.r {
    width: 16rem;
}

td.r b {
    font-weight: 600;
    display: block;
}

td.r span {
    font-size: 0.75rem;
    color: var(--ink2);
}

td.f {
    color: var(--ink2);
}

/* timing diagram */
.timing {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 0.7rem;
}

.timing .trace {
    fill: none;
    stroke: var(--violet);
    stroke-width: 2;
}

.timing .grid {
    stroke: var(--rule);
    stroke-width: 1;
    stroke-dasharray: 2 3;
}

.timing .lbl {
    font-family: var(--mono);
    font-size: 9px;
    fill: var(--ink);
}

.timing .yr {
    font-family: var(--mono);
    font-size: 9px;
    fill: var(--ink2);
}

.timing .band {
    fill: var(--pink);
    opacity: 0.09;
}

.timing .brk {
    stroke: var(--pink);
    stroke-width: 1;
}

.timing .brklbl {
    font-family: var(--mono);
    font-size: 9px;
    fill: var(--pink);
}

.note {
    font-family: var(--mono);
    font-size: .6875rem;
    color: var(--ink2);
    margin: .85rem 0 0;
    line-height: 1.7;
    /* max-width: 78ch; */
}

.note b {
    color: var(--violet);
    font-weight: 600;
    letter-spacing: .08em;
}

.fn {
    font-family: var(--mono);
    font-size: 0.6875rem;
    color: var(--ink2);
    margin: 0;
}

.fn b {
    color: var(--pink);
    font-weight: 500;
}

/* application/project panels */
.apps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
}

.app {
    background: var(--sheet);
    padding: 1.1rem;
}

/* two-column grid: items 1, 3, 5... start a row, so a last child in an odd
   position is alone on its row and should take the whole width */
.apps .app:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.app h3 {
    font-family: var(--mono);
    font-size: 0.8125rem;
    font-weight: 600;
    margin: 0 0 0.15rem;
}

.app .st {
    font-family: var(--mono);
    font-size: 0.625rem;
    color: var(--ink2);
    letter-spacing: 0.05em;
    margin-bottom: 0.6rem;
}

.app p {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--ink2);
}

footer {
    padding: 1.9rem var(--gutter) 2.75rem;
}

.foot {
    font-family: var(--mono);
    font-size: 0.6875rem;
    color: var(--ink2);
    margin-top: 1.6rem;
    line-height: 1.9;
}

:focus-visible {
    outline: 2px solid var(--violet);
    outline-offset: 2px;
}

/* themeing */
[data-theme="dark"] {
    --paper: #0d0f14;
    --sheet: #141821;
    --rule: #2a303c;
    --ink: #e9ecf3;
    --ink2: #98a0af;
    --violet: #9b84f0;
    --pink: #ff5f9e;
    --pin: #39404f;
    --solder: #ff8ac4;
    --electron: #ff9bd0;
    --scan: rgba(236, 222, 255, 0.88);
    --bloom: rgba(203, 177, 255, 0.14);
}

[data-theme="dark"] .masthead {
    background: #1b2130;
    color: var(--ink);
    border-bottom: 1px solid var(--rule);
}

[data-theme="dark"] .title {
    border-bottom-color: var(--rule);
}

[data-theme="dark"] h2 .n {
    color: #0d0f14;
}

[data-theme="dark"] .die {
    background: #232a38;
}

[data-theme="dark"] .pkg {
    border-color: var(--ink2);
}

[data-theme="dark"] .pin.live {
    box-shadow: 0 0 6px 2px rgba(255, 138, 196, 0.5);
}

/* responsiveness */
@media (max-width: 820px) {
    .opener {
        grid-template-columns: 1fr;
    }

    .col {
        border-right: 0;
        border-bottom: 1px solid var(--rule);
    }

    .pkgwrap {
        border-bottom: 0;
    }

    .apps {
        grid-template-columns: 1fr;
    }

    td.k,
    td.d,
    td.r {
        width: auto;
        white-space: normal;
    }

    table.stack td {
        display: block;
        border-bottom: 0;
        padding: 0.15rem 0;
    }

    table.stack tr {
        display: block;
        padding: 0.7rem 0;
        border-bottom: 1px solid var(--rule);
    }

    table.stack tr:last-child {
        border-bottom: 0;
    }

    table.stack thead {
        display: none;
    }
}
/* assc. feat. */
@media (prefers-reduced-motion: reduce) {
    .traces path {
        transition: none !important;
    }

    .pin.heat {
        animation: none;
    }

    .pin.rad::after {
        display: none;
    }

    .flow,
    .flash {
        display: none;
    }

    .pin.charge {
        animation: none;
    }

    .die.done .dm {
        animation: none;
        opacity: 1;
    }
}

/* To work for printing */
@media print {
    @page { margin: 12mm; size: A4; }

    html, body {
        background: #fff; color: #000;
        font-size: 10pt; line-height: 1.38; cursor: auto;
        orphans: 3; widows: 3;
    }
    a, button { cursor: auto; }
    a { color: #000; text-decoration: none; }

    .sheet { max-width: none; border: 0; min-height: 0; }
    :root { --gutter: 0px; }

    /* screen-only chrome: interactive bits and their labels */
    .pin, .traces, .flow, .flash, .dm, .p1, .pkgcap, .tgl { display: none; }

    .masthead {
        background: #fff; color: #000;
        padding: 0 0 .3rem; border-bottom: 1pt solid #000;
    }
    .masthead .pn { font-size: 10.5pt; }
    .masthead .rev { color: #444; }
    .title { padding: .4rem 0 .35rem; border-bottom: 1.5pt solid #000; }
    .title h1 { font-size: 15pt; }
    .title .sub { font-size: 7.6pt; margin-top: .2rem; }

    .opener { grid-template-columns: 1fr 1fr 32mm; border-bottom: .5pt solid #999; }
    .col, .pkgwrap { padding: .5rem .7rem; border-right: .5pt solid #999; }
    .pkgwrap { border-right: 0; padding-bottom: .3rem; }
    .opener h4, .pkgwrap h4 { margin-bottom: .4rem; }
    .opener li { font-size: .8125rem; margin-bottom: .22rem; }
    .opener p { font-size: .8125rem; }
    .stage { max-width: 28mm; }
    .die img { filter: grayscale(1) contrast(1.15); }

    /* sections may split across the page break; rows and panels may not, and a
       heading never sits alone at the foot of a page */
    section, footer { padding: .55rem 0; border-bottom: .5pt solid #999; }
    .opener { break-inside: avoid; }
    h2 { font-size: 9.5pt; margin-bottom: .5rem; break-after: avoid; }
    h2 .n {
        background: #000; color: #fff;
        -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }

    /* was inheriting 1rem while every table cell sits at .8125rem */
    .lede { font-size: .8125rem; max-width: none; }

    th { border-bottom: 1pt solid #000; padding-bottom: .3rem; }
    td { border-bottom: .5pt solid #bbb; padding: .28rem .7rem .28rem 0; }
    tr, .app, .fn, .timing { break-inside: avoid; }

    .apps { border: .5pt solid #999; gap: 0; }
    .app { border-right: .5pt solid #999; padding: .5rem; }
    .app p { font-size: .8125rem; }

    .timing { max-width: none; }
    .note {
    font-family: var(--mono);
    font-size: .6875rem;
    color: var(--ink2);
    margin: .85rem 0 0;
    line-height: 1.7;
    /* max-width: 78ch; */
}

.note b {
    color: var(--violet);
    font-weight: 600;
    letter-spacing: .08em;
}

.fn { margin-top: .25rem; }
    .foot { margin-top: .6rem; }
}

.opener h4.mt {
    margin-top: 1.3rem;
}