/* PAC Technology interactive exhibits. Palette, grid and motion tokens come from raster.css. */

.mono {
    font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-feature-settings: normal;
}

/* ---------- Exhibit zone ---------- */

.z-app {
    position: relative;
    min-width: 0;
    min-height: 0;
    z-index: 2;
}

.app-frame {
    position: absolute;
    inset: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: calc(var(--g) * .9);
    container-type: inline-size;
}

.is-flow .app-frame {
    position: relative;
    inset: auto;
}

.js .sheet .z-app {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s ease .15s, transform .9s var(--ease) .15s;
}

.js .sheet.is-in .z-app {
    opacity: 1;
    transform: none;
}

.app-cap {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.app-cap::before {
    content: "";
    width: 9px;
    height: 9px;
    flex: none;
    background: var(--accent);
}

.app-btn {
    align-self: flex-start;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    color: inherit;
    background: transparent;
    border: 1.5px solid currentColor;
    padding: 6px 10px;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}

.app-btn:hover,
.app-btn[aria-pressed="true"] {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
}

.app-btn.is-solid {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
}

.app-btn.is-solid:hover {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
}

.app-btn.is-s {
    font-size: 11px;
    padding: 3px 7px;
}

.tags,
.item .tags {
    list-style: none;
    margin: .8em 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.tags li,
.item .tags li {
    border: 1.5px solid currentColor;
    padding: 3px 7px 2px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
}

/* ---------- 01 Cover ---------- */

.hero-side {
    display: flex;
    flex-direction: column;
    gap: calc(var(--g) * 1.2);
    align-self: end;
}

.hero-side .cta {
    align-self: flex-start;
}

.layer-strip {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    font-size: clamp(.95rem, .6rem + .6vw, 1.3rem);
    font-weight: 800;
    letter-spacing: -.015em;
}

.layer-strip a {
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s;
}

.layer-strip a:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.layer-strip a:not(:last-child)::after {
    content: "\2192";
    display: inline-block;
    margin: 0 .35em;
    color: var(--accent);
    font-weight: 500;
}

/* ---------- 02 Problem ---------- */

.help-kicker {
    margin: 0;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--accent);
}

.item.help h3 {
    font-size: clamp(1.02rem, .72rem + .55vw, 1.4rem);
    letter-spacing: -.02em;
}

.item.help p {
    font-weight: 700;
    color: var(--accent);
}

.s2s-title {
    margin: 0;
    max-width: 24ch;
    font-size: clamp(1.15rem, .7rem + 1.2vw, 2.1rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -.03em;
}

.s2s-title span {
    display: block;
    color: var(--accent);
}

.s2s-cols {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: calc(var(--g) * 2.6);
}

.s2s-col {
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 2px solid var(--ink);
    padding-top: 10px;
}

.s2s-col:not(:last-child)::after {
    content: "\2192";
    position: absolute;
    right: calc(var(--g) * -1.3);
    top: 50%;
    transform: translate(50%, -50%);
    font-size: 1.7em;
    font-weight: 800;
    color: var(--accent);
}

.s2s-h {
    margin: 0;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.s2s-before {
    z-index: 2;
}

.s2s-scraps {
    position: relative;
    flex: 1;
    min-height: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    container-type: size;
    interpolate-size: allow-keywords;
}

.is-flow .s2s-scraps {
    --spread: .7;
    flex: none;
    height: 360px;
}

/* Messy: scattered by seeded fractions of the pile; tidy: filed into a two-column index */
.s2s-scraps li {
    position: absolute;
    left: 0;
    top: 0;
    z-index: var(--z, 1);
    max-width: 100cqw;
    padding: .5em .7em .45em;
    font-size: var(--fs, .95em);
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: var(--paper);
    border: 1.5px solid var(--ink);
    box-shadow: 3px 3px 0 var(--ink);
    transform: translate(calc(((var(--fx, 0) - .5) * var(--spread, 1) + .5) * (100cqw - 100%)), calc(var(--fy, 0) * (100cqh - 100%))) rotate(var(--rot, 0deg));
    transition: transform 1s var(--ease), width 1s var(--ease), font-size 1s var(--ease), padding 1s var(--ease),
        opacity .6s ease, box-shadow .6s, border-radius .6s, background-color .6s, color .6s;
    transition-delay: calc(var(--k, 0) * 28ms);
}

.s2s-scraps [data-kind="sheet"] {
    background-image:
        linear-gradient(color-mix(in srgb, var(--ink) 16%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--ink) 16%, transparent) 1px, transparent 1px);
    background-size: 16px 11px;
}

.s2s-scraps [data-kind="mail"]::before {
    content: "\2709\FE0E";
    margin-right: .4em;
}

.s2s-scraps [data-kind="chat"] {
    border-radius: 1em 1em 1em .2em;
}

.s2s-scraps [data-kind="paper"] {
    padding-bottom: 1em;
    background-image: repeating-linear-gradient(transparent 0 .85em, color-mix(in srgb, var(--accent) 40%, transparent) .85em calc(.85em + 1px));
}

.s2s-scraps [data-kind="note"] {
    background-color: var(--ink);
    color: var(--paper);
}

.s2s-scraps li.is-red {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.is-tidy .s2s-scraps li {
    --h: min(30px, (100cqh - 4px) / var(--rows, 10));
    width: calc(50cqw - 3px);
    padding: 5px 8px 4px;
    font-size: 11px;
    color: var(--ink);
    background-color: var(--paper);
    background-image: none;
    border-color: var(--ink);
    border-radius: 0;
    box-shadow: 0 0 0 var(--ink);
    opacity: .4;
    text-decoration: line-through;
    transform: translate(calc(var(--col) * (50cqw + 3px)), calc((100cqh - var(--rows, 10) * var(--h)) / 2 + var(--row) * var(--h))) rotate(0deg);
}

.s2s-stack {
    flex: 1;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    counter-reset: s;
}

.s2s-stack li {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    border: 2px solid var(--ink);
    padding: 8px 10px 7px;
    font-weight: 800;
    transition: background .35s, color .35s;
    transition-delay: calc(var(--k, 0) * 90ms + .35s);
}

.s2s-stack li::after {
    counter-increment: s;
    content: "0" counter(s);
    font-size: .8em;
    font-weight: 700;
}

.is-tidy .s2s-stack li {
    background: var(--ink);
    color: var(--paper);
    /* --sort is when the last Before scrap lands, set by apps.js */
    transition-delay: calc(var(--sort, 1.9s) + var(--k, 0) * 90ms);
}

.s2s-one {
    flex: none;
    margin: auto 0;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 16px;
    background: var(--ink);
    color: var(--paper);
    font-size: clamp(1.4rem, .8rem + 1.6vw, 2.8rem);
    font-weight: 900;
    line-height: .95;
    letter-spacing: -.04em;
    transition: background .5s ease .95s, color .5s ease .95s, transform .6s var(--ease) .95s;
}

.is-tidy .s2s-one {
    background: var(--accent);
    color: #fff;
    transform: rotate(-2deg) scale(1.03);
    transition-delay: calc(var(--sort, 1.9s) + .75s);
}

@container (max-width: 560px) {
    .s2s-cols {
        grid-template-columns: 1fr;
    }

    .s2s-col:not(:last-child)::after {
        content: "\2193";
        right: 50%;
        top: auto;
        bottom: calc(var(--g) * -1.3);
        transform: translate(50%, 50%);
    }

    .s2s-stack {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .s2s-one {
        aspect-ratio: auto;
        min-height: 110px;
    }
}

/* ---------- 03 Peel back the page ---------- */

.peel-stack {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 6px 6px 0;
}

.peel-layer {
    --tilt: 0deg;
    flex: 0 0 auto;
    min-height: 0;
    display: grid;
    grid-template-rows: auto 0fr;
    background: var(--paper);
    border: 2px solid var(--ink);
    box-shadow: 5px 5px 0 var(--ink);
    transition: grid-template-rows .6s var(--ease), flex-grow .6s var(--ease), transform .6s var(--ease), box-shadow .6s, opacity .4s;
}

.peel-layer.is-open {
    flex: 1 1 auto;
    grid-template-rows: auto 1fr;
    transform: rotate(var(--tilt));
}

.peel-layer.is-peeled {
    transform: translate(-5px, -2px) rotate(calc(var(--tilt) - .8deg));
    box-shadow: 10px 9px 0 color-mix(in srgb, var(--ink) 28%, transparent);
    opacity: .7;
}

.peel-tab {
    margin: 0;
}

.peel-tab button {
    width: 100%;
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 9px 12px 8px;
    font: inherit;
    font-size: clamp(1rem, .7rem + .6vw, 1.35rem);
    font-weight: 800;
    letter-spacing: -.02em;
    text-align: left;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
    transition: background .2s, color .2s;
}

.peel-tab button:hover {
    background: color-mix(in srgb, var(--ink) 8%, transparent);
}

.peel-tab b {
    min-width: 2em;
    font-size: 11px;
    letter-spacing: .04em;
    color: var(--accent);
}

.peel-tab span {
    margin-left: auto;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    text-align: right;
    opacity: .75;
}

.peel-layer.is-open .peel-tab button {
    background: var(--ink);
    color: var(--paper);
}

.peel-body {
    min-height: 0;
    overflow: hidden;
}

.peel-inner {
    height: 100%;
    overflow: auto;
    padding: 12px;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    gap: var(--g);
}

.peel-inner::after {
    content: attr(data-word);
    grid-column: 1 / -1;
    align-self: end;
    overflow: hidden;
    font-size: clamp(2.6rem, 16cqi, 11rem);
    font-weight: 900;
    line-height: .78;
    letter-spacing: -.055em;
    white-space: nowrap;
    color: var(--accent);
}

.peel-layer.is-open .peel-inner::after {
    animation: peel-word .9s var(--ease) both .15s;
}

@keyframes peel-word {
    from {
        transform: translateY(40%);
        opacity: 0;
    }
}

.is-flow .peel-inner {
    height: auto;
}

.is-flow .peel-inner::after {
    font-size: 18cqi;
}

.peel-code {
    margin: 0;
    padding: 12px;
    background: var(--ink);
    color: var(--paper);
    font-size: 12px;
    line-height: 1.55;
    white-space: pre;
    overflow-x: auto;
}

.peel-code i,
.peel-code [data-edition] {
    font-style: normal;
    color: var(--accent);
}

.peel-copy p {
    margin: 0;
    max-width: 40ch;
    font-weight: 500;
}

@container (max-width: 520px) {
    .peel-inner {
        grid-template-columns: 1fr;
    }

    .peel-tab span {
        display: none;
    }
}

.bvi {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--g);
    margin-top: .9em;
}

.item .bvi-h {
    margin: 0 0 .25em;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent);
}

.item .bvi ul {
    margin: 0;
}

/* ---------- 04 Business system 001 ---------- */

.demo {
    font-size: 13px;
    line-height: 1.3;
}

.demo-win {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin: 0 8px 8px 0;
    background: var(--paper);
    border: 2px solid var(--ink);
    box-shadow: 8px 8px 0 var(--ink);
}

.is-flow .demo-win {
    flex: none;
    height: min(86svh, 680px);
}

.demo-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    background: var(--ink);
    color: var(--paper);
}

.demo-id {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
    font-size: 12px;
}

.demo-id b {
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.demo-id span {
    font-weight: 600;
    opacity: .75;
}

.demo-bar .app-btn {
    flex: none;
}

.demo-bar .app-btn:hover,
.demo-bar .app-btn[aria-pressed="true"] {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
}

.demo-nav {
    display: flex;
    gap: 2px;
    padding: 0 6px;
    border-bottom: 2px solid var(--ink);
    transition: opacity .3s;
}

.demo-nav button {
    font: inherit;
    font-weight: 700;
    color: inherit;
    background: none;
    border: 0;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    padding: 9px 10px 7px;
    cursor: pointer;
}

.demo-nav button:hover {
    color: var(--accent);
}

.demo-nav button[aria-current="page"] {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.demo-body {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    perspective: 1100px;
}

.demo-view,
.demo-arch {
    position: absolute;
    inset: 0;
    overflow: auto;
    padding: 12px;
    transition: opacity .45s ease, transform .7s var(--ease);
}

.demo-view:focus {
    outline: none;
}

.demo-arch {
    display: flex;
    flex-direction: column;
    gap: 12px;
    opacity: 0;
    pointer-events: none;
}

.demo.is-arch .demo-view {
    opacity: 0;
    transform: rotateX(58deg) translateY(-18%) scale(.82);
    transform-origin: 50% 0;
    pointer-events: none;
}

.demo.is-arch .demo-arch {
    opacity: 1;
    pointer-events: auto;
}

.demo.is-arch .demo-nav {
    opacity: .35;
}

.demo h4 {
    margin: 0 0 8px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.demo p {
    margin: 0;
}

.muted {
    opacity: .68;
}

/* Dashboard */

.kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.kpi {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 0 0;
    font: inherit;
    color: inherit;
    text-align: left;
    background: none;
    border: 0;
    border-top: 2px solid var(--ink);
}

button.kpi {
    cursor: pointer;
}

button.kpi:hover .kpi-v {
    color: var(--accent);
}

.kpi-l {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.kpi-v {
    font-size: clamp(1.3rem, 4.4cqi, 2.1rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    transition: color .15s;
}

.kpi-n {
    font-size: 11px;
    opacity: .68;
}

.kpi.is-alert .kpi-v {
    color: var(--accent);
}

.dash-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: 12px;
    margin-top: 14px;
}

.dash-card {
    min-width: 0;
    border: 1.5px solid var(--ink);
    padding: 10px;
}

.dash-card p+p {
    margin-top: 3px;
}

.bars {
    height: 130px;
    display: flex;
    align-items: flex-end;
    gap: 6px;
}

.bars div {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
}

.bars i {
    display: block;
    height: calc(var(--v) * 82%);
    background: var(--ink);
    transform-origin: 50% 100%;
    animation: demo-grow .7s var(--ease) both;
    animation-delay: calc(var(--k) * 50ms);
}

.bars .is-today i {
    background: var(--accent);
}

.bars .is-today span {
    color: var(--accent);
}

@keyframes demo-grow {
    from {
        transform: scaleY(0);
    }
}

.recent {
    list-style: none;
    margin: 0;
    padding: 0;
}

.recent button {
    width: 100%;
    display: grid;
    grid-template-columns: 4.3em minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px;
    padding: 6px 2px;
    font: inherit;
    color: inherit;
    text-align: left;
    background: none;
    border: 0;
    border-top: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
    cursor: pointer;
    font-variant-numeric: tabular-nums;
}

.recent span:first-child {
    font-weight: 800;
}

.recent span:nth-child(2) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recent button:hover,
.pipe:hover,
.dt tbody tr[data-action]:hover {
    background: color-mix(in srgb, var(--accent) 9%, transparent);
}

.recent.is-low button {
    grid-template-columns: 6.4em minmax(0, 1fr) auto;
}

.recent.is-low span:last-child {
    font-weight: 800;
    color: var(--accent);
}

.recent .muted {
    padding: 6px 2px;
}

.pipes {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.pipe {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 4px 4px;
    font: inherit;
    color: inherit;
    text-align: left;
    background: none;
    border: 0;
    border-top: 4px solid var(--ink);
    cursor: pointer;
}

.pipe:last-child {
    border-top-color: var(--accent);
}

.pipe span {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.pipe b {
    font-size: 1.8em;
    font-weight: 800;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}

/* Tables */

.dt {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.dt th {
    position: sticky;
    top: -12px;
    z-index: 1;
    padding: 6px;
    text-align: left;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: var(--paper);
    border-bottom: 2px solid var(--ink);
}

.dt td {
    padding: 6px;
    border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
    vertical-align: middle;
}

.dt .n {
    text-align: right;
}

.dt .mono {
    font-size: 11.5px;
    white-space: nowrap;
}

.dt tbody tr[data-action] {
    cursor: pointer;
}

.dt td button:not(.app-btn) {
    padding: 0;
    font: inherit;
    font-weight: 800;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.cell-ellip {
    max-width: 0;
    width: 42%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.st {
    display: inline-block;
    padding: 2px 6px 1px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    border: 1.5px solid var(--ink);
}

.st[data-st="1"] {
    background: color-mix(in srgb, var(--ink) 12%, transparent);
}

.st[data-st="2"] {
    background: var(--ink);
    color: var(--paper);
}

.st[data-st="3"] {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 10px;
}

.chips button {
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    color: inherit;
    background: none;
    border: 1.5px solid var(--ink);
    padding: 3px 8px;
    cursor: pointer;
}

.chips button[aria-pressed="true"] {
    background: var(--ink);
    color: var(--paper);
}

.chips b {
    margin-left: 5px;
    font-weight: 800;
    opacity: .6;
}

/* Order */

.ord-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin-bottom: 12px;
}

.demo .ord-head h4 {
    margin: 0;
    font-size: 1.35em;
    letter-spacing: -.02em;
    text-transform: none;
}

.linkish {
    padding: 0;
    font: inherit;
    font-weight: 700;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
    text-decoration: underline;
}

.ord-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

.demo .ord-cust {
    margin-bottom: 2px;
    font-size: 1.15em;
    font-weight: 800;
}

.steps {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3px;
}

.steps li {
    padding-top: 7px;
    border-top: 4px solid color-mix(in srgb, var(--ink) 18%, transparent);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
}

.steps .is-done {
    border-top-color: var(--ink);
}

.steps .is-now {
    border-top-color: var(--accent);
    color: var(--accent);
}

.totals {
    max-width: 240px;
    margin: 8px 0 0 auto;
    font-variant-numeric: tabular-nums;
}

.totals div {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
}

.totals dd {
    margin: 0;
    font-weight: 700;
}

.totals .is-total {
    border-top: 2px solid var(--ink);
    font-size: 1.1em;
    font-weight: 800;
}

/* Stock */

.lvl {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lvl b {
    min-width: 2.6em;
    text-align: right;
}

.lvl i {
    position: relative;
    flex: 1;
    min-width: 40px;
    height: 8px;
    background: color-mix(in srgb, var(--ink) 12%, transparent);
}

.lvl i::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: calc(var(--v) * 100%);
    background: var(--ink);
}

.lvl i::before {
    content: "";
    position: absolute;
    top: -3px;
    bottom: -3px;
    left: 25%;
    width: 2px;
    z-index: 1;
    background: var(--accent);
}

.lvl.is-low b {
    color: var(--accent);
}

.lvl.is-low i::after {
    background: var(--accent);
}

/* Request log */

.demo-log {
    min-height: 5.8em;
    padding: 7px 10px 8px;
    font-size: 11px;
    line-height: 1.5;
    border-top: 2px solid var(--ink);
    background: color-mix(in srgb, var(--ink) 5%, var(--paper));
}

.demo-req {
    list-style: none;
    margin: 0;
    padding: 0;
}

.demo-req li {
    display: grid;
    grid-template-columns: 3.8em minmax(0, 1fr) auto auto;
    gap: 10px;
    white-space: nowrap;
}

.demo-req li:not(:first-child) {
    opacity: .5;
}

.demo-req li:first-child {
    animation: demo-flash .9s ease;
}

.demo-req .p,
.demo-req .d,
.demo-sql code {
    overflow: hidden;
    text-overflow: ellipsis;
}

.demo-req .d {
    max-width: 16em;
    opacity: .75;
}

.demo-req .m,
.demo-sql b {
    font-weight: 800;
    color: var(--accent);
}

.demo-req .t {
    font-weight: 700;
}

.demo .demo-sql {
    display: flex;
    gap: 10px;
    margin-top: 3px;
    white-space: nowrap;
}

.demo-sql code {
    font: inherit;
}

@keyframes demo-flash {
    from {
        background: color-mix(in srgb, var(--accent) 25%, transparent);
    }
}

/* Architecture */

.arch {
    flex: 1;
    list-style: none;
    margin: 0;
    padding: 0 6px 6px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 28px;
}

.arch li {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 14em) minmax(0, 1fr);
    align-items: center;
    gap: 3px 14px;
    padding: 14px 14px;
    background: var(--paper);
    border: 2px solid var(--ink);
    box-shadow: 4px 4px 0 var(--ink);
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .4s ease, transform .6s var(--ease);
    transition-delay: calc(var(--i) * 90ms + .2s);
}

.demo.is-arch .arch li {
    opacity: 1;
    transform: none;
}

.arch li:first-child {
    background: var(--ink);
    color: var(--paper);
}

.arch li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 24px;
    top: calc(100% + 2px);
    width: 2px;
    height: 26px;
    background: var(--ink);
}

.arch li:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 20px;
    top: calc(100% + 2px);
    z-index: 1;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent);
    animation: demo-drop 1.5s var(--ease) infinite;
    animation-delay: calc(var(--i) * .25s);
}

@keyframes demo-drop {
    0% {
        transform: translateY(-4px);
        opacity: 0;
    }

    25% {
        opacity: 1;
    }

    100% {
        transform: translateY(18px);
        opacity: 0;
    }
}

.demo .arch-n {
    grid-row: span 2;
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: clamp(1.05rem, 3.2cqi, 1.6rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.05;
}

.arch-n b {
    font-size: 10.5px;
    color: var(--accent);
}

.demo .arch-t {
    font-size: 12.5px;
    opacity: .75;
}

.demo .arch-now {
    font-size: 12px;
    color: var(--accent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@container (max-width: 560px) {
    .kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dash-grid,
    .ord-grid {
        grid-template-columns: 1fr;
    }

    .dt .hide-s,
    .demo-req .d {
        display: none;
    }

    .demo-req li {
        grid-template-columns: 3.8em minmax(0, 1fr) auto;
    }

    .arch li {
        grid-template-columns: 1fr;
    }

    .demo .arch-n {
        grid-row: auto;
    }

    .demo-id span {
        display: none;
    }
}

/* ---------- 05 Case files ---------- */

.report .num {
    font-size: .8em;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.report dl {
    margin: .6em 0 0;
}

.report dl div {
    display: grid;
    grid-template-columns: 4.8em minmax(0, 1fr);
    gap: 8px;
    padding: 5px 0;
    border-top: 1px solid color-mix(in srgb, var(--ink) 25%, transparent);
}

.report dt {
    padding-top: .2em;
    font-size: .74em;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--accent);
}

.report dd {
    margin: 0;
    font-size: .95em;
}

@media (max-height: 780px) and (min-width: 760px) {

    [data-slide="work"] .display-alt,
    [data-slide="layers"] .display-alt {
        display: none;
    }

    .item .bvi li {
        padding: .16em 0;
    }

    .report dl div {
        padding: 3px 0;
    }

    .report dd {
        font-size: .9em;
    }
}

/* ---------- 06 Under the hood ---------- */

.stack-tools.hood dd b {
    display: block;
    font-weight: 800;
}

.stack-tools.hood dd span {
    display: block;
    font-weight: 500;
    font-size: .95em;
    opacity: .85;
}

.schema-map {
    flex: 1;
    min-height: 0;
}

.schema-map svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.is-flow .schema-map svg {
    height: auto;
}

.schema text {
    font-family: var(--font);
}

.schema .shadow {
    fill: var(--ink);
}

.schema .box {
    fill: var(--paper);
    stroke: var(--ink);
    stroke-width: 2;
    transition: stroke .25s, stroke-width .25s;
}

.schema .hd {
    fill: var(--ink);
    transition: fill .25s;
}

.schema .hd-t {
    fill: var(--paper);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .06em;
}

.schema .col {
    fill: var(--ink);
    font-size: 13px;
    font-weight: 600;
}

.schema .typ {
    fill: var(--ink);
    opacity: .55;
    font-size: 11px;
    font-weight: 700;
}

.schema .typ.key {
    fill: var(--accent);
    opacity: 1;
}

.schema .sep {
    stroke: color-mix(in srgb, var(--ink) 18%, transparent);
    stroke-width: 1;
}

.schema .rel {
    fill: none;
    stroke: var(--ink);
    stroke-width: 2;
    stroke-dasharray: 1 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 1.2s var(--ease) .4s, stroke .25s, stroke-width .25s;
}

.sheet.is-in .schema .rel {
    stroke-dashoffset: 0;
}

.schema .rel.is-hot {
    stroke: var(--accent);
    stroke-width: 4;
}

.schema .rel-l {
    fill: var(--ink);
    font-size: 12px;
    font-weight: 800;
}

.schema .rel-l.is-hot {
    fill: var(--accent);
}

.schema .tbl {
    cursor: pointer;
    outline: none;
}

.schema .tbl:focus-visible .box,
.schema .tbl.is-rel .box {
    stroke: var(--accent);
}

.schema .tbl:focus-visible .box {
    stroke-width: 4;
}

.schema .tbl.is-on .hd {
    fill: var(--accent);
}

.schema-panel {
    min-height: 5.4em;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    gap: 3px 18px;
    padding-top: 8px;
    border-top: 2px solid var(--ink);
}

.schema-panel p {
    margin: 0;
}

.schema-name {
    grid-row: span 3;
    font-size: clamp(1.2rem, .8rem + 1vw, 1.9rem);
    font-weight: 800;
    letter-spacing: -.02em;
}

.schema-flags {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.schema-flags li {
    padding: 2px 6px 1px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    background: var(--ink);
    color: var(--paper);
}

@container (max-width: 480px) {
    .schema-panel {
        grid-template-columns: 1fr;
    }

    .schema-name {
        grid-row: auto;
    }
}

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

    .app-frame *,
    .app-frame *::before,
    .app-frame *::after {
        transition: none !important;
        animation: none !important;
    }

    .schema .rel {
        stroke-dashoffset: 0;
    }
}