@mafianacho/nacholens 0.0.0-stage → 0.3.0

package/src/player/fonts/OFL-IBMPlex.txt

@@ -0,0 +1,94 @@
+Modified Version (Nacho Sans, Nacho Mono: subset, WOFF2, renamed) Copyright 2026 Mafianacho.
+Copyright © 2017 IBM Corp. with Reserved Font Name "Plex"
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+
+This license is copied below, and is also available with a FAQ at: http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/src/player/player.css

@@ -0,0 +1,318 @@
+/* nacholens player — design tokens, components, layout.
+   Rule: every colour, size and duration comes from a token below; components use tokens only.
+   The palette and type roles are the Nacho Combo design system (github.com/mafianacho/nachocombo, Brand.swift):
+   section 1a holds its raw tokens for light and dark, section 1b maps the player's roles onto them. */
+
+/* ═════════════════ 1a. Nacho Combo tokens (light, then dark) ═════════════════ */
+:root {
+  color-scheme: light dark;
+  --paper: #FFFFFF;      /* the ground: window and page background */
+  --paper2: #FFF7E1;     /* tinted surfaces on paper: cards, table heads */
+  --line: #EBDDBF;       /* hairlines, card borders, dashed rules */
+  --ink: #24180D;        /* primary text, strong borders */
+  --ink2: #66553F;       /* secondary text and metadata */
+  --nacho: #FFC43D;      /* the box yellow: fills only, never text on paper */
+  --nacho-deep: #E48A0C; /* "you have to do something" as a fill */
+  --nacho-ink: #9A5A00;  /* "you have to do something" as text or an outline; the focus ring */
+  --on-nacho: #2A1A0B;   /* text and icons on nacho and nacho-deep fills */
+  --guac: #377F33;       /* success and running */
+  --salsa: #BE3B24;      /* danger, errors, "not doing" */
+  --board: #1E1610; --board2: #2B2017; --board-line: #45352A; --board-ink: #FFF1D2; --board-mute: #BFA889; --board-pick: #3A2A14;
+  --board-salsa: #F38069; --board-guac: #7FCB72;
+  --status-off: #8E8E93; /* status dot of something that is off */
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --paper: #15100B; --paper2: #211810; --line: #3A2C1F; --ink: #F8EFDF; --ink2: #C7B59C;
+    --nacho-deep: #F5A53A; --nacho-ink: #F5A53A; --guac: #7FCB72; --salsa: #F38069;
+  }
+}
+
+/* ═════════════════ 1b. Player tokens (roles mapped onto 1a) ═════════════════ */
+:root {
+  /* neutral surfaces and text. Cards are paper2 with a line hairline and no shadow. */
+  --bg: var(--paper); --surface: var(--paper); --card: var(--paper2);
+  --hover: color-mix(in srgb, var(--paper2) 60%, var(--paper)); --sunken: var(--paper2); --canvas-dot: var(--line);
+  --border: var(--line); --border-strong: color-mix(in srgb, var(--line) 45%, var(--ink2));
+  --trail-grey: color-mix(in srgb, var(--ink2) 70%, var(--paper));
+  --text: var(--ink); --text-2: var(--ink2); --text-3: var(--ink2); --text-4: color-mix(in srgb, var(--ink2) 90%, var(--paper));
+  --on-ink: var(--paper);
+  /* accent: the nacho fill marks the current thing and the one main action; outlines and links use ink;
+     the focus ring is nacho-ink */
+  --accent: var(--nacho); --on-accent: var(--on-nacho); --accent-hover: color-mix(in srgb, var(--nacho) 85%, var(--on-nacho));
+  --accent-line: var(--ink); --accent-soft: var(--paper2); --accent-text: var(--ink);
+  --accent-done: color-mix(in srgb, var(--nacho) 45%, var(--paper2)); --focus-ring: var(--nacho-ink);
+  /* status tones: every status in the product maps to one of these. Tinted fills are paper2 (no pastel). */
+  --success: var(--guac); --success-bg: var(--paper2); --success-border: var(--guac);
+  --warning: var(--nacho-ink); --warning-bg: var(--paper2); --warning-border: var(--nacho-ink);
+  --danger: var(--salsa); --danger-bg: var(--paper2); --danger-border: var(--salsa);
+  --info: var(--ink2); --info-bg: var(--paper2); --info-border: var(--border-strong);
+  --neutral: var(--ink2); --neutral-bg: var(--paper2); --neutral-border: var(--line);
+  /* data in motion (stage only): request = nacho-deep, response = ink, inside a component = guac (running) */
+  --req: var(--nacho-deep); --res: var(--ink); --int: var(--guac);
+  --req-text: var(--nacho-ink); /* nacho-deep is a fill; as text the request colour is nacho-ink */
+  --req-soft: color-mix(in srgb, var(--req) 16%, var(--paper2)); --res-soft: color-mix(in srgb, var(--res) 10%, var(--paper2));
+  --int-soft: color-mix(in srgb, var(--int) 16%, var(--paper2));
+  /* type: Nacho Sans (IBM Plex Sans) for text and headings, Nacho Mono (IBM Plex Mono) for code and paths, Anton
+     (capitals) for the one loud line. They are embedded (fonts/, SIL OFL 1.1) as a Latin subset; Hangul and any
+     other script fall back, glyph by glyph, to the system stack. Headings never use the mono face or wide
+     tracking: Hangul set that way reads as loose letters. */
+  --font: "Nacho Sans", "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Segoe UI", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
+  --mono: "Nacho Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
+  --sign: Anton, var(--font);
+  --fs-xs: 11.5px; --fs-sm: 12.5px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 18px;
+  /* space (4px grid) */
+  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px;
+  /* shape: no shadows, no pill shapes (r-full is for round dots and switches only) */
+  --r-sm: 4px; --r-md: 6px; --r-lg: 10px; --r-full: 999px;
+  --focus: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus-ring);
+  /* motion: UI transitions (the stage's travel timing lives in player.js) */
+  --t-fast: 120ms; --t-base: 200ms; --t-slow: 320ms; --ease-out: cubic-bezier(.2, .8, .2, 1);
+  /* layout */
+  --topbar-h: 52px; --foot-h: 24px; --side-w: 280px; --insp-w: 344px; --dock-h: clamp(170px, 32vh, 300px);
+}
+
+/* ═════════════════ 2. Base ═════════════════ */
+* { box-sizing: border-box; }
+html, body { height: 100%; margin: 0; }
+body { background: var(--bg); color: var(--text); font: var(--fs-md)/1.5 var(--font); -webkit-font-smoothing: antialiased; }
+button, input { font: inherit; color: inherit; }
+button { cursor: pointer; }
+:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-sm); }
+[hidden] { display: none !important; }
+.mono { font-family: var(--mono); }
+.kr { word-break: keep-all; overflow-wrap: anywhere; }
+.ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+svg.i { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
+
+/* ═════════════════ 3. Components ═════════════════ */
+.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 var(--s3); border-radius: var(--r-md); border: 1px solid var(--border-strong); background: var(--surface); font-size: var(--fs-sm); font-weight: 500; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast); }
+.btn:hover { background: var(--hover); }
+.btn:disabled { opacity: .4; cursor: default; background: var(--surface); }
+.btn.icon { width: 32px; padding: 0; }
+.btn.primary { background: var(--accent); border-color: var(--on-accent); color: var(--on-accent); font-weight: 600; min-width: 96px; }
+.btn.primary:hover { background: var(--accent-hover); }
+.btn.ghost { border-color: transparent; background: transparent; color: var(--text-2); }
+.btn.ghost:hover { background: var(--hover); color: var(--text); }
+[data-tone="success"] { --t: var(--success); --t-bg: var(--success-bg); --t-bd: var(--success-border); }
+[data-tone="warning"] { --t: var(--warning); --t-bg: var(--warning-bg); --t-bd: var(--warning-border); }
+[data-tone="danger"]  { --t: var(--danger);  --t-bg: var(--danger-bg);  --t-bd: var(--danger-border); }
+[data-tone="info"]    { --t: var(--info);    --t-bg: var(--info-bg);    --t-bd: var(--info-border); }
+[data-tone="neutral"] { --t: var(--neutral); --t-bg: var(--neutral-bg); --t-bd: var(--neutral-border); }
+.badge { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: var(--r-sm); font-size: var(--fs-xs); font-weight: 600; line-height: 1; white-space: nowrap; border: 1px solid var(--t-bd, var(--neutral-border)); background: var(--t-bg, var(--neutral-bg)); color: var(--t, var(--neutral)); }
+.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--t, var(--status-off)); flex: none; }
+.dot[data-tone="neutral"] { background: var(--status-off); }
+.seg { display: inline-flex; padding: 2px; gap: 2px; background: var(--sunken); border-radius: var(--r-md); }
+.seg button { height: 24px; padding: 0 10px; border: 1px solid transparent; border-radius: var(--r-sm); background: transparent; font-size: var(--fs-xs); font-weight: 600; color: var(--text-3); }
+.seg button[aria-pressed="true"] { background: var(--surface); color: var(--text); border-color: var(--border); }
+.switch { display: inline-flex; align-items: center; gap: var(--s2); background: none; border: 0; padding: 0; font-size: var(--fs-sm); color: var(--text-2); }
+.switch .track { width: 30px; height: 18px; border-radius: var(--r-full); background: var(--border-strong); position: relative; transition: background var(--t-base) var(--ease-out); }
+.switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border-strong); transition: transform var(--t-base) var(--ease-out); }
+.switch[aria-checked="true"] .track { background: var(--accent); }
+.switch[aria-checked="true"] .track::after { transform: translateX(12px); }
+.check { width: 18px; height: 18px; flex: none; border: 1.5px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); display: inline-grid; place-items: center; padding: 0; transition: background var(--t-fast), border-color var(--t-fast); }
+.check svg.i { width: 12px; height: 12px; stroke-width: 2.8; color: var(--on-accent); opacity: 0; transition: opacity var(--t-fast); }
+.check[aria-checked="true"] { background: var(--accent); border-color: var(--on-accent); }
+.check[aria-checked="true"] svg.i { opacity: 1; }
+.code { font-family: var(--mono); font-size: 12px; line-height: 1.6; background: var(--sunken); border-radius: var(--r-md); padding: var(--s2) var(--s3); margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); }
+.link { border: 0; background: none; padding: 0; color: var(--accent-text); font-size: inherit; font-weight: 500; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 2px; }
+.link:hover { text-decoration-color: var(--accent-line); }
+.steplink { border: 0; background: var(--sunken); color: var(--text-2); font-size: 11px; font-weight: 600; height: 18px; padding: 0 6px; border-radius: var(--r-sm); transition: background var(--t-fast), color var(--t-fast); }
+.steplink:hover { background: var(--accent); color: var(--on-accent); }
+.empty { padding: var(--s6) var(--s4); text-align: center; color: var(--text-3); font-size: var(--fs-sm); }
+.search { display: flex; align-items: center; gap: var(--s2); height: 34px; padding: 0 var(--s3); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--hover); color: var(--text-3); transition: border-color var(--t-fast), background var(--t-fast); }
+.search:focus-within { background: var(--surface); border-color: var(--border-strong); box-shadow: var(--focus); }
+.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: var(--fs-sm); color: var(--text); }
+.note { display: flex; gap: var(--s2); padding: var(--s3); border-radius: var(--r-md); background: var(--card); border: 1px solid var(--border); font-size: var(--fs-sm); }
+.note svg.i { color: var(--t); margin-top: 2px; }
+
+/* ═════════════════ 4. Shell ═════════════════
+   top bar / [ flows | stage + transport + review dock | current step ]. Each piece of information has one home. */
+.app { height: 100vh; display: grid; grid-template-rows: var(--topbar-h) minmax(0, 1fr) var(--foot-h); }
+.topbar { display: flex; align-items: center; gap: var(--s3); padding: 0 var(--s4); border-bottom: 1px solid var(--border); min-width: 0; }
+.brand { display: flex; align-items: center; gap: var(--s2); font-family: var(--sign); font-weight: 800; font-synthesis: none; text-transform: uppercase; letter-spacing: .02em; font-size: 15px; flex: none; }
+.brand .logo { width: 22px; height: 22px; border-radius: var(--r-md); background: var(--accent); color: var(--on-accent); border: 1.5px solid var(--on-accent); display: grid; place-items: center; font-size: 12px; font-weight: 800; }
+.topbar .sep { width: 1px; height: 18px; background: var(--border); flex: none; }
+.topbar .product { margin: 0; font-size: var(--fs-md); font-weight: 600; flex: none; }
+.topbar .ref { font-family: var(--mono); font-size: var(--fs-xs); color: var(--text-2); padding: 2px 6px; border-radius: var(--r-sm); background: var(--sunken); flex: none; }
+.topbar .commit { color: var(--text-2); font-size: var(--fs-sm); min-width: 0; }
+.topbar .grow { flex: 1; }
+.foot { display: flex; align-items: center; justify-content: flex-end; gap: var(--s2); padding: 0 var(--s4); border-top: 1px solid var(--border); background: var(--surface); font-size: 11px; line-height: 1; color: var(--text-3); min-width: 0; }
+.foot a { color: inherit; text-decoration: none; }
+.foot a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
+.body { display: grid; min-height: 0; grid-template-columns: var(--side-w) minmax(0, 1fr) var(--insp-w); grid-template-rows: minmax(240px, 1fr) auto auto;
+  grid-template-areas: "side stage insp" "side transport insp" "side dock insp"; }
+.side { grid-area: side; border-right: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; }
+.stage { grid-area: stage; }
+.transport { grid-area: transport; }
+.dock { grid-area: dock; height: var(--dock-h); }
+.insp { grid-area: insp; border-left: 1px solid var(--border); min-height: 0; overflow-y: auto; overflow-x: hidden; }
+
+/* ═════════════════ 5. Sidebar: flows and their steps ═════════════════ */
+.side-tools { padding: var(--s3); }
+.side-list { flex: 1; min-height: 0; overflow: auto; padding: 0 var(--s2) var(--s3); }
+.gh { display: flex; align-items: center; gap: 6px; width: 100%; padding: var(--s2) var(--s2) var(--s1); border: 0; background: none; color: var(--text-3); font-size: var(--fs-xs); font-weight: 600; text-align: left; }
+.gh svg.i { width: 14px; height: 14px; transition: transform var(--t-base) var(--ease-out); }
+.gh[aria-expanded="false"] svg.i { transform: rotate(-90deg); }
+.gh .n { color: var(--text-4); }
+.uc { display: flex; align-items: flex-start; gap: var(--s2); width: 100%; padding: var(--s2); border: 0; border-radius: var(--r-md); background: none; text-align: left; transition: background var(--t-fast); }
+.uc:hover { background: var(--hover); }
+.uc[aria-current="true"] { background: var(--sunken); }
+.uc .main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.uc .t { font-weight: 600; }
+.uc .m { font-family: var(--mono); font-size: 11px; color: var(--text-3); }
+.steps { list-style: none; margin: 2px 0 6px; padding: 0 0 0 10px; position: relative; }
+.steps::before { content: ""; position: absolute; left: 21px; top: 10px; bottom: 10px; width: 1px; background: var(--border); }
+.st { display: flex; align-items: center; gap: var(--s2); min-height: 30px; padding: 3px 6px; border-radius: var(--r-md); font-size: var(--fs-sm); color: var(--text-2); cursor: pointer; position: relative; transition: background var(--t-fast), color var(--t-fast); }
+.st:hover { background: var(--hover); color: var(--text); }
+.st[aria-current="step"] { color: var(--text); font-weight: 600; background: var(--accent-soft); }
+.st .n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 600; color: var(--text-3); background: var(--surface); border: 1px solid var(--border-strong); flex: none; position: relative; z-index: 1; font-variant-numeric: tabular-nums; transition: background var(--t-base), color var(--t-base), border-color var(--t-base); }
+.st.done .n { background: var(--sunken); }
+.st[aria-current="step"] .n { background: var(--accent); border-color: var(--on-accent); color: var(--on-accent); }
+.st .lbl { flex: 1; min-width: 0; }
+.st .chg { font-size: 11px; font-weight: 600; color: var(--t); flex: none; }
+.st .check { width: 16px; height: 16px; }
+
+/* ═════════════════ 6. Stage ═════════════════ */
+.stage { position: relative; min-height: 0; overflow: hidden; background-color: var(--bg); background-image: radial-gradient(var(--canvas-dot) 1px, transparent 1px); background-size: 20px 20px; }
+.stage svg.canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
+.caption { position: absolute; top: var(--s4); left: 50%; transform: translateX(-50%); max-width: calc(100% - 32px); display: flex; align-items: center; gap: var(--s2); padding: 6px 12px 6px 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); font-size: var(--fs-sm); z-index: 2; transition: opacity var(--t-base) var(--ease-out); }
+.caption .leg { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border-radius: var(--r-sm); font-size: var(--fs-xs); font-weight: 700; color: var(--lc); background: var(--surface); border: 1px solid var(--lc); flex: none; white-space: nowrap; }
+.caption .leg.req { --lc: var(--req-text); --lc-soft: var(--req-soft); }
+.caption .leg.res { --lc: var(--res); --lc-soft: var(--res-soft); }
+.caption .leg.int { --lc: var(--int); --lc-soft: var(--int-soft); }
+.caption .leg.idle { --lc: var(--text-3); --lc-soft: var(--sunken); }
+.caption .txt { min-width: 0; }
+.caption .txt.mono { font-size: 12px; }
+.caption.swap { opacity: 0; }
+.stage.in-detail .caption { left: auto; right: var(--s4); transform: none; max-width: calc(100% - 330px); }
+.crumbs { position: absolute; top: var(--s4); left: var(--s4); z-index: 3; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 4px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); font-size: var(--fs-sm); }
+.crumbs .back { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px 0 6px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); transition: background var(--t-fast), color var(--t-fast); }
+.crumbs .back:hover { background: var(--accent); border-color: var(--on-accent); color: var(--on-accent); }
+.crumbs .back svg.i { width: 14px; height: 14px; }
+.crumbs .here { font-weight: 700; }
+.crumbs .sub { color: var(--text-3); }
+.hidden-note { position: absolute; left: var(--s4); bottom: var(--s3); font-size: var(--fs-xs); color: var(--text-3); background: var(--card); padding: 2px 8px; border-radius: var(--r-sm); border: 1px solid var(--border); }
+/* architecture nodes */
+.nd .box { fill: var(--card); stroke: var(--border-strong); stroke-width: 1.25; transition: stroke var(--t-base), stroke-width var(--t-base); }
+.nd .ibox { fill: var(--surface); stroke: var(--border); stroke-width: 1; transition: fill var(--t-base); }
+.nd .ico { fill: none; stroke: var(--text-2); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: stroke var(--t-base); }
+.nd .nm { font-size: 14px; font-weight: 600; fill: var(--text); }
+.nd .kd { font-size: 11px; fill: var(--text-3); }
+.nd.has-detail { cursor: pointer; }
+.nd.has-detail:hover .box { stroke: var(--accent-line); }
+.nd .open { fill: none; stroke: var(--text-4); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke var(--t-fast); }
+.nd.has-detail:hover .open { stroke: var(--accent-line); }
+/* not on this flow: dimmed by colour (text stays >= 4.5:1), not by opacity */
+.nd.off .box, .it.off .box { fill: var(--surface); stroke: var(--border); }
+.nd.off .ibox { fill: var(--surface); } .nd.off .ico, .nd.off .open { stroke: var(--text-4); }
+.nd.off .nm, .it.off .t1 { fill: var(--text-3); font-weight: 500; } .nd.off .kd, .it.off .t2 { fill: var(--text-4); }
+.nd.visited .box, .it.visited .box { stroke: var(--trail-grey); }
+.nd.active .box, .it.active .box, .it.hitcard .box { stroke: var(--text); stroke-width: 2; }
+.nd.active .ibox { fill: var(--accent); stroke: var(--on-accent); } .nd.active .ico { stroke: var(--on-accent); }
+.nd.working .box, .it.working .box { stroke: var(--int); stroke-width: 2; }
+.nd.working .ibox { fill: var(--int-soft); } .nd.working .ico { stroke: var(--int); }
+.nd:focus-visible, .it:focus-visible { box-shadow: none; }
+.nd:focus-visible .box, .it:focus-visible .box { stroke: var(--focus-ring); stroke-width: 2.25; }
+/* change tags (opaque, one style everywhere) */
+.tagbg { fill-opacity: 1; stroke-width: 1; }
+.tagtx { font-size: 11px; font-weight: 700; text-anchor: middle; }
+.chg-added .tagbg { fill: var(--success-bg); stroke: var(--success-border); } .chg-added .tagtx { fill: var(--success); }
+.chg-modified .tagbg { fill: var(--warning-bg); stroke: var(--warning-border); } .chg-modified .tagtx { fill: var(--warning); }
+.chg-removed .tagbg { fill: var(--danger-bg); stroke: var(--danger-border); } .chg-removed .tagtx { fill: var(--danger); }
+/* links and wires */
+.lk, .wr { fill: none; stroke: var(--border-strong); stroke-width: 1.5; transition: stroke var(--t-slow), stroke-width var(--t-slow), opacity var(--t-slow); }
+.lk.off, .wr.off { opacity: .32; }
+.lk.visited, .wr.visited { stroke: var(--trail-grey); stroke-width: 2; }
+.wr.stubwire { stroke-dasharray: 3 4; }
+.wr.chg-added:not(.visited) { stroke: var(--success-border); stroke-width: 2; }
+.wr.chg-modified:not(.visited) { stroke: var(--warning-border); stroke-width: 2; }
+/* inside a component */
+.it .box { fill: var(--card); stroke: var(--border-strong); stroke-width: 1.25; transition: stroke var(--t-base), stroke-width var(--t-base); }
+.it.part, .it.table, .it.endpoint, .it.stub.nav { cursor: pointer; }
+.it.part:hover .box, .it.table:hover .box, .it.endpoint:hover .box, .it.stub.nav:hover .box { stroke: var(--accent-line); }
+.it.stub .box { fill: var(--surface); stroke-dasharray: 4 3; }
+.it.sel .box { stroke: var(--focus-ring); stroke-width: 2.25; }
+.it .t1 { font-size: 14px; font-weight: 600; fill: var(--text); }
+.it .t2 { font-size: 11px; fill: var(--text-3); }
+.it.stub .t1 { font-size: 14px; text-anchor: middle; } .it.stub .t2 { text-anchor: middle; }
+.it .t1.mono { font-family: var(--mono); }
+.it .hr { stroke: var(--border); }
+.it .colname { font-size: 11.5px; fill: var(--text-2); font-family: var(--mono); }
+.it .coltype { font-size: 11px; fill: var(--text-4); font-family: var(--mono); text-anchor: end; }
+.it .collab { font-size: 11px; fill: var(--text-4); font-family: var(--mono); }
+.it .colname.col-hit { fill: var(--accent-text); font-weight: 700; }
+.it .mth rect { fill: var(--surface); stroke: var(--border); } .it .mth text { font-size: 11px; font-weight: 700; fill: var(--text-2); text-anchor: middle; font-family: var(--mono); }
+.it .opb rect { fill: var(--board); } .it .opb text { fill: var(--board-ink); font-size: 11px; font-weight: 700; text-anchor: middle; }
+.colh { font-size: 11px; font-weight: 700; fill: var(--text-4); text-anchor: middle; }
+.xchip rect { fill: var(--card); stroke: var(--int); stroke-width: 1; } .xchip text { font-size: 11px; fill: var(--int); font-family: var(--mono); text-anchor: middle; }
+/* data in motion */
+.flowline { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1 9; animation: march .5s linear infinite; }
+.trail { fill: none; stroke-width: 2.5; stroke-linecap: round; }
+.flowline.req, .trail.req { stroke: var(--req); } .flowline.res, .trail.res { stroke: var(--res); } .flowline.int, .trail.int { stroke: var(--int); }
+.trail.past { opacity: .28; }
+@keyframes march { from { stroke-dashoffset: 10; } to { stroke-dashoffset: 0; } }
+.pk .core { stroke: var(--surface); stroke-width: 2.5; }
+.pk .halo { opacity: .25; animation: halo 1.1s var(--ease-out) infinite; }
+.pk.req .core, .pk.req .halo { fill: var(--req); } .pk.res .core, .pk.res .halo { fill: var(--res); } .pk.int .core, .pk.int .halo { fill: var(--int); }
+@keyframes halo { from { r: 7px; opacity: .35; } to { r: 18px; opacity: 0; } }
+.ring { fill: none; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: ring .55s var(--ease-out) forwards; }
+.ring.req { stroke: var(--req); } .ring.res { stroke: var(--res); } .ring.int { stroke: var(--int); }
+@keyframes ring { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.14); } }
+.wbar-bg { fill: var(--int-soft); } .wbar { fill: var(--int); }
+.zoom { fill: var(--surface); stroke: var(--accent-line); stroke-width: 1.5; }
+.canvas.fade-in { animation: stagein var(--t-slow) var(--ease-out); }
+@keyframes stagein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
+
+/* ═════════════════ 7. Transport ═════════════════ */
+.transport { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s4); border-top: 1px solid var(--border); background: var(--surface); min-width: 0; }
+.scrub { flex: 1; display: flex; gap: 3px; min-width: 120px; height: 28px; align-items: center; }
+.seg-step { flex: 1; height: 6px; border-radius: 1px; background: var(--sunken); border: 0; padding: 0; position: relative; overflow: hidden; transition: height var(--t-fast); }
+.seg-step:hover { height: 10px; }
+.seg-step i { position: absolute; top: 0; bottom: 0; left: 0; width: 0; background: var(--accent); border-radius: 1px; }
+.seg-step.done i { width: 100%; background: var(--accent-done); }
+.counter { font-size: var(--fs-sm); color: var(--text-2); font-variant-numeric: tabular-nums; min-width: 44px; text-align: right; }
+
+/* ═════════════════ 8. Inspector: the current step (or the item picked inside a component) ═════════════════ */
+.ih { padding: var(--s5) var(--s5) var(--s3); }
+.eyebrow { font-size: var(--fs-xs); font-weight: 600; color: var(--text-3); margin: 0 0 6px; }
+.lead { font-size: 15px; line-height: 1.65; color: var(--text); margin: 0; }
+.isec { padding: var(--s3) var(--s5); }
+.isec h2 { margin: 0 0 var(--s2); font-size: var(--fs-xs); font-weight: 600; color: var(--text-3); }
+.isec p { margin: 0; }
+.ev { list-style: none; margin: 0; padding: 0; font-family: var(--mono); font-size: 12px; }
+.ev li { display: flex; align-items: flex-start; gap: var(--s2); padding: 4px 0; border-bottom: 1px dashed var(--border); color: var(--text-2); }
+.ev li:last-child { border-bottom: 0; }
+.ev li span:first-child { flex: 1; min-width: 0; overflow-wrap: anywhere; }
+.ev li.hit { color: var(--text); }
+.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px var(--s3); font-size: var(--fs-sm); margin: 8px 0 0; }
+.kv dt { color: var(--text-3); font-family: var(--mono); }
+.kv dd { margin: 0; min-width: 0; font-family: var(--mono); overflow-wrap: anywhere; }
+.rel { list-style: none; margin: 0; padding: 0; }
+.rel li { display: flex; flex-direction: column; padding: 6px 0; border-bottom: 1px dashed var(--border); }
+.rel li:last-child { border-bottom: 0; }
+.rel .who { font-size: var(--fs-sm); color: var(--text); }
+.rel .how { font-size: 12px; color: var(--text-3); overflow-wrap: anywhere; }
+.xf { margin: 0 0 var(--s2); }
+.xf .at { font-size: var(--fs-sm); font-weight: 600; }
+.xf .io { font-family: var(--mono); font-size: 12px; color: var(--int); }
+.xf .map { font-family: var(--mono); font-size: 12px; color: var(--text-2); margin: 2px 0 0; padding: 0; list-style: none; }
+.before { font-size: var(--fs-sm); }
+.before dt { font-family: var(--font); }
+.legend { display: grid; grid-template-columns: 28px 1fr; gap: 10px var(--s3); align-items: center; font-size: var(--fs-sm); color: var(--text-2); }
+.legend svg { display: block; }
+.gone { list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); }
+.gone li { padding: 4px 0; color: var(--text-2); }
+
+/* ═════════════════ 9. Responsive and reduced motion ═════════════════ */
+@media (max-width: 1280px) { :root { --side-w: 248px; --insp-w: 304px; } }
+@media (max-width: 1100px) {
+  .app { height: auto; min-height: 100vh; }
+  .body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 460px auto auto auto; grid-template-areas: "side" "stage" "transport" "insp" "dock"; }
+  .side { border-right: 0; border-bottom: 1px solid var(--border); }
+  .side-list { max-height: 260px; }
+  .insp { border-left: 0; border-top: 1px solid var(--border); overflow: visible; }
+  .stage.in-detail .caption { max-width: calc(100% - 32px); top: 64px; }
+  .topbar .commit { display: none; }
+}
+@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }