.cell-facts{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--frame);margin-top:48px}.cell-fact{padding:22px;border-right:1px solid var(--frame);min-height:180px}.cell-fact:last-child{border-right:0}.cell-fact strong{display:block;font-size:2.2rem;letter-spacing:-.08em}.cell-fact small{display:block;margin-top:15px;color:var(--dim);font:10px var(--mono);line-height:1.5;text-transform:uppercase}.benchmark{border:1px solid currentColor;margin-top:45px}.benchmark-head{padding:17px 20px;border-bottom:1px solid currentColor;display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap}.benchmark-row{display:grid;grid-template-columns:1.3fr .8fr .8fr .8fr;border-bottom:1px solid var(--rule)}.benchmark-row:last-child{border-bottom:0}.benchmark-row>*{padding:18px 20px;border-right:1px solid var(--rule)}.benchmark-row>*:last-child{border-right:0}.benchmark-row strong{font-size:1.1rem}.benchmark-row span{font:11px var(--mono);color:var(--dim);line-height:1.5}.benchmark-note{padding:17px 20px;border-top:1px solid currentColor;color:var(--dim);font-size:.88rem;line-height:1.5;overflow-wrap:break-word}.benchmark-note+.benchmark-note{padding:12px 20px 14px}.comparison{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:45px}
/* future.html carries four products in this row; three columns would leave an empty quadrant on the
   last one. Only this grid opts in — cell.html and sources.html keep the three-column rhythm. */
.comparison-4{grid-template-columns:repeat(4,1fr)}
/* Two rows of the 320px default would push this scene past a 900px window; the cards only need the
   space their own copy takes. */
@media(max-width:1150px){.comparison-4{grid-template-columns:1fr 1fr}.comparison-4 .compare-card{min-height:250px}}.compare-card{border:1px solid var(--frame);padding:22px;min-height:320px;display:flex;flex-direction:column}.compare-card.highlight{background:var(--red);color:#fff;border-color:var(--red)}.compare-card h3{font-size:1.6rem;letter-spacing:-.06em;margin:45px 0 12px}.compare-card p{line-height:1.5;color:var(--dim);font-size:.92rem}.compare-card.highlight p{color:#fff}.compare-card a{margin-top:auto;font:10px var(--mono);text-transform:uppercase}.terminal{position:relative;--rule:rgba(242,241,236,.16);--frame:rgba(242,241,236,.34);--dim:#a29e92;--faint:#8b887c;border:1px solid var(--frame);background:var(--ink);color:var(--paper);font:clamp(10.5px,1vw,12px)/1.85 var(--mono);box-shadow:12px 12px 0 rgba(23,23,18,.12),0 26px 46px -40px rgba(216,41,28,.55);overflow:hidden}
.terminal:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(130% 95% at 90% -12%,rgba(216,41,28,.3),transparent 58%),repeating-linear-gradient(to bottom,rgba(242,241,236,.05) 0 1px,transparent 1px 3px)}
.term-bar{position:relative;display:flex;align-items:center;gap:10px;padding:10px 15px;border-bottom:1px solid rgba(242,241,236,.14);background:rgba(242,241,236,.05);font-size:max(10px,.84em);letter-spacing:.07em;text-transform:uppercase}
.term-dots{display:flex;gap:5px}
.term-dots i{width:7px;height:7px;background:rgba(242,241,236,.28)}
.term-dots i:last-child{background:var(--red)}
.term-title{color:#c9c5ba}
.term-sig{margin-left:auto;color:var(--faint)}
.term-body{position:relative;padding:16px 17px 17px;display:grid;gap:11px}
.term-cmd{--i:0;--tw:46ch;display:flex;align-items:baseline;white-space:nowrap;color:var(--dim);margin:0}
.term-cmd>span{flex:none;display:inline-block;overflow:hidden;width:var(--tw)}
.caret{flex:none;width:.55ch;height:1.05em;margin-left:.2ch;background:var(--red2);transform:translateY(.12em);animation:caret-blink 1.1s steps(1) infinite}
.term-row{display:grid;grid-template-columns:1.8ch 11ch 1fr;column-gap:.7ch;align-items:baseline;margin:0}
.term-row.plain{grid-template-columns:1.8ch 1fr}
.term-row .ok{color:rgba(242,241,236,.66);font-weight:400}
.term-row .k{color:var(--red2);opacity:.78;font-weight:400}
.term-row .v{color:var(--paper)}
.term-out{padding-top:12px;border-top:1px dashed rgba(242,241,236,.16)}
.term-out a{color:var(--red2);text-underline-offset:3px}
.term-out .v{grid-column:1/-1}
.terminal .dim{color:var(--faint)}
@keyframes term-line{0%{opacity:0;transform:translateY(9px);filter:blur(7px)}100%{opacity:1;transform:none;filter:blur(0)}}
@keyframes term-type{0%{width:0}100%{width:var(--tw)}}
@keyframes caret-blink{0%,45%{opacity:1}50%,95%{opacity:0}100%{opacity:1}}
/* Einmal abspielen, dann halten: eine Zeile, die sich auflöst, während der Leser noch bei der
   vorherigen ist, beweist nichts. Der Cursor bleibt als Lebenszeichen. */
.terminal.run .term-cmd,.terminal.run .term-row{animation:term-line .5s cubic-bezier(.2,.75,.25,1) calc(1.4s + var(--i)*.2s) both}
.terminal.run .term-cmd>span{animation:term-type 1.8s steps(46,end) both}
@media(max-width:600px){.terminal{font-size:10px}.term-bar{font-size:1em;gap:8px;padding:9px 12px}.term-sig{display:none}.term-cmd{--tw:46ch}.term-body{padding:15px 13px 17px}.term-row{grid-template-columns:1.6ch 10.6ch 1fr;column-gap:.5ch}}
/* 43ch of command need 264px at the 10px floor; the box has 252 at 320px. Below that width the
   typed line wraps instead of going back under the floor, and the typing mask is lifted. */
@media(max-width:340px){.term-cmd{white-space:normal}.term-cmd>span{width:100%}.terminal.run .term-cmd>span{animation:none}}
@media(prefers-reduced-motion:reduce){.terminal.run .term-cmd,.terminal.run .term-row,.terminal.run .term-cmd>span,.caret{animation:none}.term-cmd>span{width:auto}}.source-note{margin-top:20px;color:var(--dim);font:10px/1.6 var(--mono);text-transform:uppercase}.source-note a{color:var(--accent);text-decoration:underline}
/* Skyline teaser: a real product window, framed the way the terminals on this site are. What sits in
   it is now footage from the running reader, so the window needs no drift to read as a live scene. */
.sky-window{margin:0;border:1px solid var(--frame);background:var(--ink);box-shadow:12px 12px 0 rgba(23,23,18,.12),0 26px 46px -40px rgba(216,41,28,.55)}
.sky-bar{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--frame)}
.sky-title{font:10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--paper)}
.sky-tag{margin-left:auto;font:10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(242,241,236,.72)}
.sky-view{position:relative;overflow:hidden}
.sky-view img{display:block;width:100%;height:auto}
/* The caption is the picture's provenance — which source, which build, which day. A product shot
   without a date is a mood image, and this page has no use for those. */
.sky-cap{padding:11px 14px;border-top:1px solid var(--frame);font:10px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:rgba(242,241,236,.72)}
/* The three commands a first run needs, set so they can be copied line by line: the page should
   answer "how do I start" before it points at the repository. */
.quick{display:grid;gap:9px;margin-top:26px;max-width:620px;text-align:left;font:400 12.5px/1.5 var(--mono);color:var(--ink)}
.quick i{font-style:normal;color:var(--deep);display:inline-block;width:18px}
.quick b{font-weight:400;color:var(--muted)}
@media(max-width:850px){.cell-facts,.comparison{grid-template-columns:1fr 1fr}.cell-fact:nth-child(2){border-right:0}.cell-fact:nth-child(n+3){border-top:1px solid var(--frame)}.benchmark-cols{display:none}.benchmark-row{grid-template-columns:1fr}.benchmark-row>*{border-right:0;border-bottom:1px solid var(--rule)}.benchmark-row>*:last-child{border-bottom:0}.benchmark-row span:before{content:attr(data-col) " · ";color:var(--dim)}}@media(max-width:600px){.cell-facts,.comparison{grid-template-columns:1fr}.cell-fact{border-right:0!important;border-top:1px solid var(--frame)}.cell-fact:first-child{border-top:0}.compare-card{min-height:260px}}
.chart-panel{margin-top:30px;border:1px solid currentColor;background:rgba(255,255,255,.035);background:color-mix(in srgb,currentColor 5%,transparent)}
.chart-toolbar{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;padding:19px 20px 16px;border-bottom:1px solid color-mix(in srgb,currentColor 20%,transparent)}
.chart-head b{display:block;font-size:1.15rem;letter-spacing:-.02em}
.chart-head span{display:block;margin-top:7px;font:10px var(--mono);letter-spacing:.09em;text-transform:uppercase;opacity:.55}
.chart-tabs{display:flex;border:1px solid currentColor}
.chart-tab{border:0;border-left:1px solid color-mix(in srgb,currentColor 26%,transparent);background:transparent;color:inherit;padding:11px 13px;font:10px var(--mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background .18s,color .18s}
.chart-tab:first-child{border-left:0}
.chart-tab:hover{background:color-mix(in srgb,var(--red) 24%,transparent)}
.chart-tab.active{background:var(--red);color:#fff}
.chart-tab:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.chart-body{padding:18px 20px 19px}
.chart-meta,.chart-foot,.chart-scale{font:10px/1.6 var(--mono);opacity:.62}
.chart-meta{margin-bottom:18px}
.bars{display:grid;gap:16px}
.bar-label{display:flex;justify-content:space-between;align-items:baseline;gap:14px;font:11px var(--mono);margin-bottom:8px}
.bar-label .lbl{display:flex;align-items:baseline;gap:9px;min-width:0}
.bar-label b{font-weight:400;text-transform:uppercase;letter-spacing:.06em}
.bar-label .tag{font-style:normal;font-size:10px;letter-spacing:.09em;text-transform:uppercase;border:1px solid var(--accent);color:var(--accent);padding:2px 5px;white-space:nowrap}
.bar-label .val{color:var(--accent);white-space:nowrap}
.bar-label .val i{font-style:normal;opacity:.7}
.bar-label .ratio{font-style:normal;margin-left:9px;opacity:.6}
.bar-row:not(.best) .bar-label{opacity:.74}
.bar-track{position:relative;height:14px;background-color:rgba(211,208,197,.3);background-color:color-mix(in srgb,currentColor 15%,transparent);background-image:repeating-linear-gradient(90deg,transparent 0 calc(25% - 1px),color-mix(in srgb,currentColor 30%,transparent) calc(25% - 1px) 25%);overflow:hidden}
.bar-row.best .bar-track{box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 40%,transparent)}
.bar-track i{display:block;width:var(--bar);height:100%;background:var(--red);transform-origin:left;animation:grow .7s cubic-bezier(.2,.8,.2,1) var(--delay) both}
.chart-scale{margin-top:16px}
.chart-foot{margin-top:11px;padding-top:12px;border-top:1px dashed color-mix(in srgb,currentColor 24%,transparent);opacity:.72}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.bar-track i{animation:none}}
@media(max-width:600px){.chart-toolbar{padding:15px 14px 13px}.chart-tabs{width:100%}.chart-tab{flex:1;min-width:0;padding:9px 4px;font-size:10px;letter-spacing:.02em}.chart-body{padding:15px 14px 16px}.bar-label{font-size:10px;gap:8px;flex-wrap:wrap}.bar-label .tag{font-size:10px}.bar-label .val{font-size:11px}.bar-track{height:12px}}
/* Evidence is the densest scene on the site: 1080px of stack at 1440 wide, so two thirds of it sat
   behind an internal scrollbar. The committed table and the interactive chart are peers, not a
   queue - at desktop widths they share a row and the scene fits the viewport it is given. */
@media(min-width:1100px) {
    .bench-scene .scene-inner {
        display:grid;
        grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
        gap:20px 34px;
        align-items:start
    }
    .bench-scene .scene-inner>* {
        margin-top:0
    }
    .bench-scene .scene-inner>:is(.eyebrow,h2,.lead,.source-note) {
        grid-column:1/-1
    }
    /* The lead is a method note here, not a display line: a wider measure keeps it to two rows. */
    .bench-scene .lead {
        max-width:62ch
    }
}

/* Sources' opening scene carries the four-column number row: 48px above the rule and a 180px floor
   per cell pushed it past the fold there. Scoped to the opening scene, so the four existing
   .cell-facts rows (cell x2, enterprise, future) keep the band height they were tuned for. On phones
   the row stacks to one column, where a 180px floor per cell cost four screens instead of one. */
.scene.opening .cell-facts{margin-top:26px}
.scene.opening .cell-fact{min-height:0}

/* E2's ask, cell.html's three-way comparison: a filled red card is a verdict, and the card's own
   copy says "that is not a ranking". Flagged, not filled - the frame and the label carry the red,
   the surface stays paper. Scoped to that scene by its data-step; renaming the step moves the rule. */
.scene[data-step="Three boundaries"] .compare-card.highlight{background:var(--paper);color:var(--ink);border-color:var(--red)}
.scene[data-step="Three boundaries"] .compare-card.highlight p{color:var(--dim)}
.scene[data-step="Three boundaries"] .compare-card.highlight .mono{color:var(--accent)}
.scene[data-step="Three boundaries"] .compare-card.highlight h3{color:var(--ink)}

/* Kurze Desktop-Fenster: die Benchmark-Szene trägt die höchste Last im Streifen. Reihen-,
   Kopf- und Werkzeugleisten-Polster werden enger, bevor Inhalt unter die feste Leiste läuft. */
@media(min-width:1100px) and (max-height:860px) {
    .bench-scene .benchmark-row>*{padding:13px 20px}
    .bench-scene .benchmark-head,.bench-scene .benchmark-note{padding-top:12px;padding-bottom:12px}
    .bench-scene .chart-toolbar{padding:14px 20px 12px}
    .bench-scene .chart-body{padding:16px 20px 18px}
    .bench-scene .source-note{margin-top:12px}
}
/* Zweite Stufe für Laptop-Fenster um 760 px Höhe: ohne sie läuft die Benchmark-Szene über die
   feste Leiste hinaus, und auf dem Desktop scrollt die Szene nicht. */
@media(min-width:1100px) and (max-height:800px) {
    .bench-scene .benchmark-row>*{padding:10px 16px}
    .bench-scene .benchmark-head,.bench-scene .benchmark-note{padding-top:9px;padding-bottom:9px}
    .bench-scene .chart-toolbar{padding:10px 16px 9px}
    .bench-scene .chart-body{padding:12px 16px 14px}
    .bench-scene .bar-track{height:10px}
    .bench-scene .bar-row+.bar-row{margin-top:10px}
    .bench-scene .source-note{margin-top:8px}
}

/* Quellen-Karten sind selbst der Link; die letzte Zeile sitzt am Fuß und der ganze Card reagiert. */
.compare-card > span:last-child {
    margin-top:auto
}
a.compare-card {
    transition:transform .18s, box-shadow .18s
}
a.compare-card:hover {
    transform:translateY(-2px);
    box-shadow:4px 4px 0 var(--lift)
}

/* enterprise.html "who it is for": four beachheads as a ledger, not four tiles of acronym. A tile of
   display type answers no question and leaves 180px of air per item in a narrow panel; the row lets a
   reader compare the environments on the same two questions. */
.ledger{border:1px solid var(--frame);margin-top:44px}
.ledger-head,.ledger-row{display:grid;grid-template-columns:1.15fr 1.45fr 1.4fr}
.ledger-head{border-bottom:1px solid var(--frame);font:10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.ledger-row{border-top:1px solid var(--rule)}
.ledger-row:first-of-type{border-top:0}
.ledger-head span,.ledger-row>*{padding:15px 22px}
.ledger-row>*{padding-top:17px;padding-bottom:17px}
.ledger-head span+span,.ledger-row>span+span{border-left:1px solid var(--rule)}
.ledger-row b{display:flex;flex-direction:column;gap:7px;font-weight:600;font-size:1.3rem;letter-spacing:-.03em}
.ledger-row i{font-style:normal;font:10px var(--mono);letter-spacing:.14em;color:var(--faint)}
.ledger-row span{font-size:.95rem;line-height:1.55;color:var(--dim)}
@media(max-width:850px){
 .ledger-head{display:none}
 .ledger-row{grid-template-columns:1fr 1fr}
 .ledger-row b{grid-column:1/-1;padding-bottom:4px}
 .ledger-row>span{border-left:0;border-top:1px solid var(--rule)}
 .ledger-row span:before{content:attr(data-col);display:block;margin-bottom:7px;font:10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
}
/* Under 600px a table cannot be scanned anyway, so the row stops being a grid: the two cells flow
   into one sentence pair and the RUNS/HOLDS labels drop out, which keeps two environments on screen
   instead of one. */
@media(max-width:600px){
 .ledger-row{display:block}
 .ledger-row>span{display:inline;padding:0;border-top:0;font-size:.93rem}
 .ledger-row>span+span{border-left:0}
 .ledger-row span:before{display:none}
 .ledger-row b{padding-bottom:6px}
}