/* The hero film modal — paired with assets/video.js. Loads after every other stylesheet so it can sit on top of any theme. One native , built lazily on first open. The dialog carries its own colour so it reads the same on paper and on the dark themes: it is a screen, not a page surface. IT IS PULLED IN FROM partials/herocopy.html, NOT FROM THE . index.html is generated and its head is not the hero's to edit, so the one section that owns a [data-video] trigger carries its own two asset lines. That also keeps the class sweep's rule true by construction -- the assets can only be on a page that has a trigger, because they arrive with the trigger. */ .vid-dlg{ /* 920 was a film frame. The session transcript is 80-column terminal output with one 770-character line in it, so every column of width bought back is a wrap avoided; 1100 gives ~150 columns at this size and still leaves the 16:9 film frame 618px tall inside a 900px viewport. */ width:min(1100px,calc(100vw - 2 * var(--gutter))); max-width:none; padding:0; border:1px solid rgba(237,235,227,.22); border-radius:12px; background:#0E0F13; color:#EDEBE3; box-shadow:0 30px 90px rgba(0,0,0,.55); overflow:hidden; } .vid-dlg::backdrop{background:rgba(10,10,12,.72);} html[data-theme="terminal"] .vid-dlg, html[data-theme="brutal"] .vid-dlg, html[data-theme="riso"] .vid-dlg{border-radius:0;} html[data-theme="brutal"] .vid-dlg{border:3px solid #000;box-shadow:12px 12px 0 #E8FF2A;} html[data-theme="terminal"] .vid-dlg{border-color:rgba(43,255,111,.45);background:#050807;color:#2BFF6F;} .vid-hd{ display:flex;align-items:center;justify-content:space-between;gap:1rem; padding:.7rem .8rem .7rem 1.15rem; border-bottom:1px solid rgba(237,235,227,.14); } html[data-theme="terminal"] .vid-hd{border-bottom-color:rgba(43,255,111,.28);} .vid-ttl{ font-family:var(--mono);font-size:.7rem;font-weight:500;line-height:1.4; letter-spacing:.09em;text-transform:uppercase;color:rgba(237,235,227,.6); } html[data-theme="terminal"] .vid-ttl{color:rgba(43,255,111,.7);} .vid-x{ appearance:none;display:inline-flex;align-items:center;justify-content:center; width:34px;height:34px;padding:0;margin:0; background:none;border:1px solid rgba(237,235,227,.22);border-radius:6px; color:inherit;cursor:pointer; transition:border-color .15s ease,background .15s ease; } html[data-theme="terminal"] .vid-x, html[data-theme="brutal"] .vid-x, html[data-theme="riso"] .vid-x{border-radius:0;} .vid-x:hover{border-color:currentColor;background:rgba(237,235,227,.08);} .vid-x svg{display:block;} .vid-hd-r{display:inline-flex;align-items:center;gap:.6rem;} /* SKIP TO END. Present only while the replay is still typing, and it is the second tab stop in the dialog so a keyboard visitor reaches it before the transcript rather than after it. */ .vid-skip{ appearance:none;display:inline-flex;align-items:center;height:34px;padding:0 .8rem; background:none;border:1px solid rgba(237,235,227,.22);border-radius:6px; font-family:var(--mono);font-size:.66rem;font-weight:500;line-height:1; letter-spacing:.14em;text-transform:uppercase; color:rgba(237,235,227,.72);cursor:pointer; transition:border-color .15s ease,color .15s ease,background .15s ease; } html[data-theme="terminal"] .vid-skip, html[data-theme="brutal"] .vid-skip, html[data-theme="riso"] .vid-skip{border-radius:0;} html[data-theme="terminal"] .vid-skip{border-color:rgba(43,255,111,.32);color:rgba(43,255,111,.8);} .vid-skip:hover{border-color:currentColor;color:#EDEBE3;background:rgba(237,235,227,.08);} html[data-theme="terminal"] .vid-skip:hover{color:#2BFF6F;background:rgba(43,255,111,.14);} .vid-skip[hidden]{display:none;} /* the 16:9 screen: the film, or -- only when the film cannot be played -- the route sheet below. Never a placeholder. */ .vid-box{ position:relative; aspect-ratio:16 / 9; display:flex;flex-direction:column;align-items:center;justify-content:center; gap:1.2rem; padding:1.5rem; text-align:center; background:#08090C; } html[data-theme="terminal"] .vid-box{background:#030504;} .vid-box video{ position:absolute;inset:0; width:100%;height:100%; display:block;background:#000; } /* =========================================================================== THE SESSION REPLAY The interim film is a captured `proof` session -- real commands, verbatim stdout and stderr, real exit codes, real durations -- replayed as terminal TEXT rather than played as pixels. That is why it is styled here and not encoded: text is crisp at any dpr, selectable, copyable, readable by a screen reader, and a few kilobytes. A video of a terminal is a worse artifact than the terminal. The box loses its centring for this one screen: a transcript starts at the top-left and grows down, and it scrolls inside its own 16:9 frame so the dialog never changes size while it types. =========================================================================== */ .vid-box-term{display:block;padding:0;} .vt{ position:absolute;inset:0;overflow:auto; padding:1.1rem 1.25rem 1.4rem; /* NOT var(--mono). The captured output draws tables and trees with ╔ ═ ║ ╚ ━ ├ └ ─ ✓ ⚠ −, and the site face does not carry the double-line box set. Per-glyph fallback would still SHOW them, but from a different face with a different advance, which is worse than tofu here: it knocks every column of a 171-line ASCII table out of alignment. The system terminal faces carry the whole set at the mono advance, so they lead, and the brand face is not in this stack at all -- a transcript is not brand type. */ font-family:ui-monospace,Menlo,Monaco,"SF Mono","DejaVu Sans Mono", "Liberation Mono",Consolas,"Courier New",monospace; font-size:.72rem;line-height:1.55; color:rgba(237,235,227,.86); text-align:left; scrollbar-width:thin; } html[data-theme="terminal"] .vt{color:rgba(43,255,111,.88);} .vt:focus-visible{outline:2px solid currentColor;outline-offset:-3px;} /* the authored line that frames each step. It is the only text in the pane the capture did not measure, so it is set apart from the transcript by face, colour and a rule rather than blended into it. */ .vt-desc,.vt-cap{ font-family:var(--mono); font-size:.68rem;line-height:1.62;letter-spacing:.02em; color:rgba(237,235,227,.55); margin:0; } html[data-theme="terminal"] .vt-desc, html[data-theme="terminal"] .vt-cap{color:rgba(43,255,111,.58);} /* the page's prose measure (~31em) is inherited here and broke a one-sentence caption over three ragged lines inside a 1100px pane. These read across the transcript, not down a column. */ .vt-desc,.vt-cap{max-width:min(96ch,100%);} /* the provenance line is one machine string; it gets the whole pane */ .vt-env{max-width:100%;} .vt-desc{padding-bottom:.7rem;} .vt-env{ margin:0 0 .2rem; font-family:var(--mono);font-size:.62rem;letter-spacing:.06em; color:rgba(237,235,227,.38); word-break:break-word; } html[data-theme="terminal"] .vt-env{color:rgba(43,255,111,.42);} .vt-step{border-top:1px solid rgba(237,235,227,.12);margin-top:1.15rem;padding-top:.95rem;} html[data-theme="terminal"] .vt-step{border-top-color:rgba(43,255,111,.16);} .vt-cap-note{margin-top:.4rem;font-style:italic;} .vt-cmd{ display:flex;align-items:baseline;gap:.6rem; margin:.45rem 0 .3rem; font-family:var(--mono); color:#EDEBE3; } html[data-theme="terminal"] .vt-cmd{color:#2BFF6F;} .vt-prompt{flex:0 0 auto;opacity:.55;} .vt-cmd-t{flex:1 1 auto;font-weight:500;word-break:break-word;} /* the receipt beside the command: the REAL captured duration and the REAL exit code. The replay's pacing is capped so nobody waits out a 40-second audit in a modal; the number printed here is never capped. */ .vt-meta{ flex:0 0 auto; font-family:var(--mono); font-size:.62rem;letter-spacing:.08em; color:rgba(237,235,227,.5);white-space:nowrap; } html[data-theme="terminal"] .vt-meta{color:rgba(43,255,111,.55);} /* A NON-ZERO EXIT IS THE PAYOFF, NOT AN ERROR. The gate step in the shipped capture exits 2 because Proof found two real warnings on the founder's own corpus -- the product catching something in the very project this site holds up as its evidence. So it is amber, the attention colour, never a failure red, and it out-specifies the per-theme .vt-meta rule to stay that way. */ html .vt-meta.vt-nonzero{color:#FFC24D;} .vt-out{ margin:0; /* WRAP, NEVER CLIP. One captured line in this session is 770 characters. */ white-space:pre-wrap;overflow-wrap:anywhere; color:rgba(237,235,227,.72); } html[data-theme="terminal"] .vt-out{color:rgba(43,255,111,.72);} .vt-err{color:#FF9A8C;} html[data-theme="terminal"] .vt-err{color:#FFB26B;} .vid-note{ margin:0; /* the site's prose measure is inherited from the page and is ~31em, which broke this one short sentence across two ragged lines inside a 920px screen. The dialog is a screen, not a column of prose. */ max-width:min(64ch,100%); font-family:var(--mono);font-size:.82rem;line-height:1.6;letter-spacing:.02em; text-wrap:balance; color:rgba(237,235,227,.7); } html[data-theme="terminal"] .vid-note{color:rgba(43,255,111,.8);} /* THE HONEST DEGRADE, styled as a route sheet rather than an apology. There is no "coming soon" screen in this file any more and there must not be one again: the routes below are live objects, and they are the only thing the dialog is allowed to fall back to. The old .vid-ask was a rounded sales pill that sent the visitor to the demo form -- the exact second sales action the hero is not allowed to end on. */ .vid-routes{ display:flex;flex-wrap:wrap;align-items:center;justify-content:center; gap:.7rem 1.1rem; } .vid-route{ display:inline-flex;align-items:center;min-height:44px;padding:0 1.15rem; border:1px solid currentColor;border-radius:2px; font-family:var(--mono);font-size:.78rem;font-weight:500;line-height:1; letter-spacing:.16em;text-transform:uppercase; color:#EDEBE3;text-decoration:none;cursor:pointer; transition:background .15s ease,color .15s ease; } html[data-theme="terminal"] .vid-route{border-radius:0;color:#2BFF6F;} html[data-theme="brutal"] .vid-route, html[data-theme="riso"] .vid-route{border-radius:0;} .vid-route:hover{background:#EDEBE3;color:#0E0F13;} html[data-theme="terminal"] .vid-route:hover{background:rgba(43,255,111,.16);color:#2BFF6F;} .vid-dlg :focus-visible{outline:2px solid currentColor;outline-offset:2px;} /* no page scroll behind the open dialog */ html.vid-open,html.vid-open body{overflow:hidden;} @media (max-width:640px){ .vid-box{gap:.9rem;padding:1rem;} /* 16:9 is the right frame for a film and the wrong one for a transcript on a phone: at 390 it leaves a 198px reading window. The replay gets a portrait window instead, capped so it never pushes the dialog past the viewport. */ .vid-box-term{padding:0;aspect-ratio:auto;height:min(64vh,520px);} .vid-note{font-size:.74rem;} .vt{font-size:.7rem;padding:.8rem .85rem 1rem;} .vt-meta{font-size:.6rem;} .vid-skip{padding:0 .55rem;font-size:.6rem;letter-spacing:.1em;} .vid-hd{padding:.6rem .6rem .6rem .9rem;} } @media (prefers-reduced-motion: reduce){ .vid-dlg,.vid-x,.vid-route,.vid-skip{transition:none;} }