/* -------------------------------------------------------------
 * BITYPE TYPE SYSTEM — MINIMALIST DARK-MODE STYLESHEET
 * ------------------------------------------------------------- */

/* Font Definitions */
@font-face {
  font-family: 'Mg12';
  src: url('assets/types/Mg12-Medium.woff2') format('woff2'),
       url('assets/types/Mg12-Medium.woff') format('woff'),
       url('assets/types/Mg12-Medium.ttf') format('truetype'),
       url('assets/types/Mg12-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'N27';
  src: url('assets/types/N27-Regular.woff2') format('woff2'),
       url('assets/types/N27-Regular.woff') format('woff'),
       url('assets/types/N27-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  unicode-range: U+0030-0039, U+0025, U+002B, U+002D, U+002E, U+002F, U+003A, U+003B, U+003C, U+003D, U+003E, U+003F, U+0040;
  font-display: swap;
}

@font-face {
  font-family: 'N27-Full';
  src: url('assets/types/N27-Regular.woff2') format('woff2'),
       url('assets/types/N27-Regular.woff') format('woff'),
       url('assets/types/N27-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'N27-Italic';
  src: url('assets/types/N27-Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Archia';
  src: url('assets/types/Archia-Regular.woff2') format('woff2'),
       url('assets/types/Archia-Regular.woff') format('woff'),
       url('assets/types/Archia-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'BiType_Thin';
  src: url('assets/fonts/BiType_Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: 'BiType_Light';
  src: url('assets/fonts/BiType_Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'BiType_Regular';
  src: url('assets/fonts/BiType_Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'BiType_Bold';
  src: url('assets/fonts/BiType_Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'BiType_Base';
  src: url('assets/fonts/BiType_Base.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
/* Matrix Code NFI by Thomas W. Otto (Norfok Incredible Font Design, 2003): the digits of the
   Matrix preset and of BiType Matrix. One file for every weight, so the browser never fakes a bold. */
@font-face {
  font-family: 'Matrix Code NFI';
  src: url('assets/fonts/MatrixCodeNFI.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
}
@font-face {
  font-family: 'BiType_Matrix';
  src: url('assets/fonts/BiType_Matrix.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* Custom Main Header Hover Fonts */
@font-face {
  font-family: 'BiType10_Matrix_1';
  src: url('assets/FONTS_MAIN HEADER/BiType10_Matrix_1.ttf') format('truetype');
}
@font-face {
  font-family: 'BiType10_Thin_3';
  src: url('assets/FONTS_MAIN HEADER/BiType10_Thin_3.ttf') format('truetype');
}
@font-face {
  font-family: 'BiType_Arial';
  src: url('assets/FONTS_MAIN HEADER/BiType_Arial.ttf') format('truetype');
}
@font-face {
  font-family: 'BiType_Custom_10';
  src: url('assets/FONTS_MAIN HEADER/BiType_Custom (10).ttf') format('truetype');
}
@font-face {
  font-family: 'BiType_Custom_19';
  src: url('assets/FONTS_MAIN HEADER/BiType_Custom (19).ttf') format('truetype');
}
@font-face {
  font-family: 'BiType_Custom_27';
  src: url('assets/FONTS_MAIN HEADER/BiType_Custom (27).ttf') format('truetype');
}
@font-face {
  font-family: 'BiType_Guided';
  src: url('assets/FONTS_MAIN HEADER/BiType_Guided.ttf') format('truetype');
}
@font-face {
  font-family: 'BiType_ULTRA';
  src: url('assets/FONTS_MAIN HEADER/BiType_ULTRA.ttf') format('truetype');
}
@font-face {
  font-family: 'BiType_comic';
  src: url('assets/FONTS_MAIN HEADER/BiType_comic.ttf') format('truetype');
}
@font-face {
  font-family: 'BiType_courriernew';
  src: url('assets/FONTS_MAIN HEADER/BiType_courriernew.ttf') format('truetype');
}
@font-face {
  font-family: 'BiType_doto';
  src: url('assets/FONTS_MAIN HEADER/BiType_doto.ttf') format('truetype');
}
@font-face {
  font-family: 'BiType_georgia';
  src: url('assets/FONTS_MAIN HEADER/BiType_georgia.ttf') format('truetype');
}
@font-face {
  font-family: 'BiType_impact';
  src: url('assets/FONTS_MAIN HEADER/BiType_impact.ttf') format('truetype');
}
@font-face {
  font-family: 'BiType_system';
  src: url('assets/FONTS_MAIN HEADER/BiType_system.ttf') format('truetype');
}

/* Custom Matrix Background Fonts */
@font-face {
  font-family: 'BG_BiType_Arial';
  src: url('assets/FONTS_MATRIX_BG/BiType_Arial.ttf') format('truetype');
}
@font-face {
  font-family: 'BG_BiType_Custom_10';
  src: url('assets/FONTS_MATRIX_BG/BiType_Custom (10).ttf') format('truetype');
}
@font-face {
  font-family: 'BG_BiType_Custom_27';
  src: url('assets/FONTS_MATRIX_BG/BiType_Custom (27).ttf') format('truetype');
}
@font-face {
  font-family: 'BG_BiType_Custom_28';
  src: url('assets/FONTS_MATRIX_BG/BiType_Custom (28).ttf') format('truetype');
}
@font-face {
  font-family: 'BG_BiType_Custom_29';
  src: url('assets/FONTS_MATRIX_BG/BiType_Custom (29).ttf') format('truetype');
}
@font-face {
  font-family: 'BG_BiType_Custom_cloes11';
  src: url('assets/FONTS_MATRIX_BG/BiType_Custom cloes(11).ttf') format('truetype');
}
@font-face {
  font-family: 'BG_BiType_Custom_color9';
  src: url('assets/FONTS_MATRIX_BG/BiType_Custom color(9).ttf') format('truetype');
}
@font-face {
  font-family: 'BG_BiType_Guided_2';
  src: url('assets/FONTS_MATRIX_BG/BiType_Guided (2).ttf') format('truetype');
}
@font-face {
  font-family: 'BG_BiType_Guided';
  src: url('assets/FONTS_MATRIX_BG/BiType_Guided.ttf') format('truetype');
}
@font-face {
  font-family: 'BG_BiType_ULTRA';
  src: url('assets/FONTS_MATRIX_BG/BiType_ULTRA.ttf') format('truetype');
}
@font-face {
  font-family: 'BG_BiType_comic';
  src: url('assets/FONTS_MATRIX_BG/BiType_comic.ttf') format('truetype');
}
@font-face {
  font-family: 'BG_BiType_courriernew';
  src: url('assets/FONTS_MATRIX_BG/BiType_courriernew.ttf') format('truetype');
}
@font-face {
  font-family: 'BG_BiType_georgia';
  src: url('assets/FONTS_MATRIX_BG/BiType_georgia.ttf') format('truetype');
}
@font-face {
  font-family: 'BG_BiType_impact';
  src: url('assets/FONTS_MATRIX_BG/BiType_impact.ttf') format('truetype');
}
@font-face {
  font-family: 'BG_BiType_system';
  src: url('assets/FONTS_MATRIX_BG/BiType_system.ttf') format('truetype');
}
@font-face {
  font-family: 'BG_ComicRelief_Regular';
  src: url('assets/FONTS_MATRIX_BG/Comic_Relief,Doto,Ultra/Comic_Relief/ComicRelief-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'BG_ComicRelief_Bold';
  src: url('assets/FONTS_MATRIX_BG/Comic_Relief,Doto,Ultra/Comic_Relief/ComicRelief-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'BG_Doto_Variable';
  src: url('assets/FONTS_MATRIX_BG/Comic_Relief,Doto,Ultra/Doto/Doto-VariableFont_ROND,wght.ttf') format('truetype');
}
@font-face {
  font-family: 'BG_Ultra_Regular';
  src: url('assets/FONTS_MATRIX_BG/Comic_Relief,Doto,Ultra/Ultra/Ultra-Regular.ttf') format('truetype');
}

/* ================================================================== */
/* BiType v4b: the plain version.
   Same features as v4a. The look is the browser's own: white page, black serif text,
   blue links, native buttons, sliders, checkboxes and colour fields. This file only
   adds what is needed to lay things out and to show and hide them. */
/* ================================================================== */

:root {
  /* app.js writes these names into markup it generates, so they keep plain values */
  --color-bg-base: #fff;
  --color-bg-panel: #fff;
  --color-bg-inner: #fff;
  --color-text-primary: #000;
  --color-text-secondary: #444;
  --color-text-tertiary: #777;
  --color-border-base: #000;
  --color-border-accent: #000;
  --font-header: "Times New Roman", Times, serif;
  --font-mono: "Times New Roman", Times, serif;
  --font-body: "Times New Roman", Times, serif;
  --font-numbers: "Times New Roman", Times, serif;
}

* { box-sizing: border-box; }
html { background: #fff; }
body {
  margin: 0;
  padding: 0 12px 60px;
  background: #fff;
  color: #000;
  font-family: "Times New Roman", Times, serif;
  font-size: 16px;
  line-height: 1.35;
}
img { max-width: 100%; }
h1, h2, h3, h4 { margin: 0.6em 0 0.4em; }
p { margin: 0.5em 0; }
hr { border: 0; border-top: var(--line) solid #000; }
select, input[type="text"], textarea { font: inherit; max-width: 100%; }
textarea { width: 100%; }
button, .btn { font: inherit; cursor: pointer; }
a.btn, label.btn { color: #00e; text-decoration: underline; }
label.btn { display: inline-block; }
blockquote { margin: 0.8em 0 0.8em 1.5em; font-style: italic; }
.ti { font-size: 0.95em; }

/* Small helpers the markup already uses */
.w-100 { width: 100%; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.m-0 { margin: 0; }
.p-1 { padding: 0.5rem; }
.mt-auto { margin-top: auto; }
.text-center { text-align: center; }
.system-code { display: block; font-size: 13px; color: #444; }
.section-label { display: block; font-weight: bold; margin: 0 0 6px; }
.field-label, .color-label { display: block; font-size: 14px; }
.info-box { margin: 8px 0; padding-left: 10px; border-left: 1px solid #000; font-size: 14px; }
.styled-list { margin: 0.4em 0; padding-left: 1.3em; }
.term-note { background: none; border: 0; padding: 0 2px; font: inherit; color: #00e; cursor: help; }

/* ---- Pages --------------------------------------------------------- */
.decor-grid-bg, #matrix-bg-canvas, .lamp, .panel-dot, .custom-switch, .slider-switch, .blink-dot { display: none !important; }
.page-section { display: none; }
.page-section.active { display: block; }
.content-container { max-width: 1400px; margin: 0 auto; padding-top: 12px; }

/* ---- Header -------------------------------------------------------- */
.main-header {
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 24px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 10px 0 8px;
  border-bottom: var(--line) solid #000;
}
.logo-container { display: flex; align-items: baseline; gap: 12px; cursor: pointer; }
.header-logo-matrix, .startup-logo-matrix { font-family: 'BiType_Matrix', serif; line-height: 1; }
.header-logo-matrix { font-size: 22px; }
.logo-text { font-size: 14px; }
.main-nav { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.nav-link.active { color: #000; font-weight: bold; text-decoration: none; }
.nav-link-muted { color: #777; }
.name-s { color: inherit; text-decoration: none; }
.name-s .no-glyph-inline { display: none; height: 1em; width: auto; vertical-align: -0.12em; }
.name-s:hover .name-s-letter, .name-s:focus-visible .name-s-letter { display: none; }
.name-s:hover .no-glyph-inline, .name-s:focus-visible .no-glyph-inline { display: inline-block; }
.no-glyph-inline { height: 1.1em; width: auto; vertical-align: middle; }
.main-footer { max-width: 1400px; margin: 40px auto 0; padding-top: 8px; border-top: var(--line) solid #000; display: flex; justify-content: space-between; font-size: 14px; }
#logo-floating-widget, #bmac-floating-widget { background: #fff; border: var(--line) solid #000; color: #000; cursor: pointer; }
#custom-cursor { position: fixed; top: 0; left: 0; z-index: 999999; pointer-events: none; }
#custom-cursor.hidden { display: none; }
.cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #00e; }
.cursor-glass-ring { display: none; }

/* ---- Start page ---------------------------------------------------- */
.st { max-width: 760px; }
.startup-logo-matrix { font-size: clamp(34px, 9vw, 84px); white-space: nowrap; margin: 16px 0 6px; }
.startup-subtitle { font-size: 14px; }
.st-h1 { font-size: 2em; margin: 0.7em 0 0.1em; }
.st-h2 { font-size: 1.25em; font-style: italic; margin: 0 0 0.4em; }
.st-h3 { margin: 0 0 1.2em; }
.st-primary { border: 1px solid #000; padding: 12px 14px; margin: 0 0 14px; cursor: pointer; }
.st-primary .card-title { margin: 0; font-size: 1.5em; }
.st-primary .card-desc { margin: 0.3em 0 0.7em; }
.st-primary .btn { font-size: 1.05em; padding: 4px 12px; }
.st-items { display: block; }
.st-item { display: list-item; list-style: disc inside; margin: 4px 0; }
.st-item span { font-weight: bold; }
.st-item small { font-size: 1em; color: #000; }
.st-item small::before { content: ' \2014  '; }
.st-item.active { font-weight: normal; }

/* ---- Creator ------------------------------------------------------- */
.creator-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.panel { border: var(--line) solid #000; min-width: 0; }
.panel-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px; padding: 4px 8px; border-bottom: var(--line) solid #000; }
.panel-title { font-weight: bold; }
.panel-body { padding: 8px; }
.control-group { padding: 8px 0 10px; }
.control-group.border-top, .control-group + .control-group { border-top: var(--line) solid #000; }
.form-row { display: flex; gap: 8px; }
.form-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.preview-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.icon-btn { padding: 1px 6px; }
.icon-btn.active { font-weight: bold; outline: 1px solid #000; }

.presets-container { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.preset-swatch { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 58px; padding: 5px 6px; border: var(--line) solid #999; cursor: pointer; font-size: 13px; }
.preset-swatch.active { border: 1px solid #000; font-weight: bold; }
.preset-mini-grid { display: grid; grid-template-columns: repeat(2, 9px); grid-auto-rows: 9px; border: var(--line) solid #999; }
.custom-presets-actions { display: flex; gap: 6px; margin-bottom: 6px; }
.custom-preset-wrapper { display: flex; align-items: stretch; gap: 2px; }

.tabs-nav { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.tab-btn.active { font-weight: bold; }
.tab-pane { display: none; }
.tab-pane.active { display: block; }
.settings-sub-panel { display: none; }
.settings-sub-panel.active { display: block; }

.slider-group { margin: 6px 0 10px; }
.slider-label-val { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 14px; }
input[type="range"] { width: 100%; margin: 2px 0; }
#input-zoom { width: 90px; }
.zoom-slider-container { display: inline-flex; align-items: center; gap: 5px; }
.slider-track-container { position: relative; }
.slider-rec-marker { position: absolute; top: 50%; width: 9px; height: 9px; background: #00e; transform: translate(-50%, -50%); cursor: pointer; z-index: 2; }
.input-number-small { font: inherit; font-size: 14px; }

.color-picker-row { display: flex; gap: 14px; flex-wrap: wrap; }
.color-picker-col { display: flex; flex-direction: column; gap: 2px; }
.color-picker-wrapper { display: flex; align-items: center; gap: 6px; }
.color-hex { font-size: 14px; text-transform: uppercase; }
.toggle-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.switch input { margin: 0; }
#toggle-vector-preview, #toggle-vector-preview-copy { display: inline-block !important; }
.switch-control { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.vector-toggle-container-copy { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }

.upload-zone { display: grid; gap: 6px; }
.upload-box { display: block; padding: 6px 8px; border: var(--line) dashed #000; cursor: pointer; }
.upload-box.dragover { background: #ffc; }
.upload-content { display: flex; flex-direction: column; font-size: 14px; }
.file-info { color: #444; }

.designer-selection-row { display: flex; gap: 6px; }
.designer-interactive-grid { display: grid; grid-template-columns: repeat(4, 38px); grid-auto-rows: 38px; gap: 3px; margin: 4px 0; }
.designer-cell { border: var(--line) solid #000; background: #fff; cursor: pointer; }
.designer-cell.active { background: #000; }

.text-meta { display: flex; justify-content: space-between; font-size: 13px; color: #444; }
.canvas-wrapper { display: flex; flex-direction: column; }
.canvas-viewport {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  position: relative;
  overflow: auto;
  min-height: 380px;
  max-height: calc(100vh - 220px);
  padding: 12px;
  border: var(--line) solid #000;
  background: #fff;
}
.canvas-viewport.fullscreen-mode {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-height: none !important;
  z-index: 10000 !important;
  padding: 24px !important;
  background: #fff !important;
  align-items: center !important;
  justify-content: center !important;
}
.canvas-viewport.fit-mode { padding: 8px; align-items: center; justify-content: center; overflow: hidden; max-height: 480px; }
#editor-svg-container { margin: auto; display: inline-block; flex-shrink: 0; position: relative; outline: var(--line) solid #ccc; }
#editor-svg-container svg { display: block; }
.canvas-viewport:not(.fit-mode) #editor-svg-container svg { position: absolute; top: 0; left: 0; transform-origin: top left; }
.canvas-viewport.fit-mode #editor-svg-container { width: 100% !important; height: 100% !important; max-width: 100%; max-height: 100%; margin: 0; }
.canvas-viewport.fit-mode #editor-svg-container svg { width: 100% !important; height: 100% !important; position: static !important; transform: none !important; object-fit: contain; }
.export-actions .btn { margin: 2px 0; }
.full-sheet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

/* ---- The Font ------------------------------------------------------ */
.font-layout, .copier-container, .about-container, .library-container { max-width: 1100px; }
.weight-controller { margin: 10px 0; padding: 8px; border: var(--line) solid #000; }
.weight-labels { display: flex; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.weight-label { color: #00e; text-decoration: underline; cursor: pointer; }
.weight-label.active { color: #000; font-weight: bold; text-decoration: none; }
.specimen-display-board { margin: 10px 0; }
.specimen-section-title { font-weight: bold; margin: 8px 0 4px; }
.specimen-large { font-family: 'BiType_Regular', serif; font-size: clamp(30px, 4vw, 46px); line-height: 1.1; text-transform: uppercase; word-break: break-all; max-height: 330px; overflow: auto; padding: 8px; border: var(--line) solid #000; }
.download-grid { margin: 10px 0; padding: 0; }
.download-card { padding: 6px 0; border-top: var(--line) solid #ccc; }
.download-card-meta { display: flex; gap: 10px; align-items: baseline; }
.weight-tag { font-weight: bold; }
.stem-width-tag { color: #444; font-size: 14px; }
.download-card-desc { margin: 2px 0; }
.download-card.is-current .weight-tag::after { content: ' (selected)'; font-weight: normal; }

/* ---- About --------------------------------------------------------- */
.ab > * { margin-bottom: 22px; }
.ab-top { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.ab-head h3 { margin: 0 0 0.4em; }
.ab-sub { margin-top: 14px; padding-top: 6px; border-top: var(--line) solid #000; }
.ab-steps { display: grid; grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr) 30px minmax(0, 1fr); align-items: start; margin: 12px 0; padding: 12px; border: var(--line) solid #000; }
.ab-step { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.ab-step-figure { height: 150px; display: flex; align-items: center; justify-content: center; }
.ab-step-label { font-weight: bold; }
.ab-step-note { font-size: 14px; max-width: 22ch; }
.ab-step-note em { display: block; }
.ab-arrow { margin-top: 68px; text-align: center; }
.ab-arrow::before { content: '\2192'; font-size: 22px; }
.ab-shapes { gap: 12px; }
.ab-shape { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ab-cap { display: flex; flex-direction: column; font-size: 13px; }
.ab-cell { width: 56px; height: 56px; position: relative; border: var(--line) solid #000; background: #fff; }
.ab-cell.is-1 i { position: absolute; left: 50%; top: 14%; bottom: 14%; width: 14%; margin-left: -7%; background: #000; }
.ab-cell.is-0 i { position: absolute; inset: 16%; border: 5px solid #000; border-radius: 50%; }
.ab-grid { display: grid; grid-template-columns: repeat(4, 34px); grid-auto-rows: 34px; gap: 2px; position: relative; }
.ab-grid .ab-cell { width: auto; height: auto; }
.ab-grid .ab-cell.is-0 i { border-width: 3px; }
.ab-cell-index { display: grid; place-items: center; }
.ab-cell-index span { font-size: 12px; }
.ab-cell-index u { position: absolute; inset: 0; background: #000; opacity: 0; }
.ab-cell-index i { opacity: 0; }
.ab-ghost { position: absolute; inset: 0; display: grid; place-items: center; font-family: "Times New Roman", Times, serif; font-weight: bold; font-size: 150px; line-height: 1; color: #00e; opacity: 0; pointer-events: none; }
.ab-grid-index { cursor: pointer; }
.ab-grid-index.ph1 .ab-cell-index span { opacity: 0.2; }
.ab-grid-index.ph1 .ab-ghost { opacity: 1; }
.ab-grid-index.ph2 .ab-ghost { opacity: 0.25; }
.ab-grid-index.ph2 .ab-cell-index.is-1 u { opacity: 1; }
.ab-grid-index.ph3 .ab-ghost, .ab-grid-index.ph3 .ab-cell-index span, .ab-grid-index.ph3 .ab-cell-index.is-1 u { opacity: 0; }
.ab-grid-index.ph3 .ab-cell-index i { opacity: 1; }
.ab-quad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 28px; }
.ab-quad-item { display: block; }
.ab-quad-item .ab-mini { display: none; }
.ab-bin { font-weight: bold; margin-right: 6px; }
.ab-quad-item p { display: inline; }
.ab-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.ab-stack { display: flex; flex-direction: column; gap: 16px; }
.ab-media { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.ab-process { padding-left: 1.4em; }
.creator-bio-grid { display: flex; gap: 16px; align-items: flex-start; }
.bio-photo-wrapper { flex: none; width: 170px; }
.bio-photo { width: 100%; height: auto; display: block; }
.interactive-diagram-card { border: var(--line) solid #000; }
.matrix-interactive-grid { display: grid; grid-template-columns: repeat(4, 44px); grid-auto-rows: 44px; gap: 3px; margin: 8px 0; }
.grid-cell-btn { border: var(--line) solid #000; background: #fff; padding: 0; }
.grid-cell-btn.active { background: #000; }
.metric-row, .metadata-row { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.metric-val { overflow-wrap: anywhere; text-align: right; }
.metadata-card { margin-top: 8px; }
iframe { max-width: 100%; border: var(--line) solid #000; }

/* Glyph map (in About) and Text Copier */
.glyph-correlation-top-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; }
.glyph-showcase-card, .alphabet-showcase-card, .text-display-card, .binary-stream-card { border: var(--line) solid #000; padding: 8px; }
.text-display-card, .binary-stream-card { padding: 0; margin-top: 12px; }
.glyph-showcase-box { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.char-display-badge { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 80px; height: 80px; border: var(--line) solid #000; }
.char-display-badge .label { font-size: 12px; }
.active-char { font-size: 36px; font-weight: bold; }
.visualizer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; width: 120px; height: 120px; }
.visualizer-cell { border: var(--line) solid #000; background: #fff; }
.visualizer-cell.active { background: #000; }
.map-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 4px; }
.map-char-btn { padding: 6px 0; }
.map-char-btn.active { font-weight: bold; outline: 1px solid #000; }
.matrix-4x4-pre, .phrase-asset-text, .binary-raw-box { font-family: "Courier New", Courier, monospace; font-size: 14px; line-height: 1.5; white-space: pre; overflow-x: auto; max-height: 320px; margin: 6px 0 0; padding: 8px; border: var(--line) solid #000; background: #fff; color: #000; }
.binary-raw-box { white-space: normal; overflow-wrap: anywhere; }

/* ---- My Library ---------------------------------------------------- */
.lib-hero { margin-bottom: 10px; }
.grid-heart::before { content: '\2665  '; }
.lib-stage { border: var(--line) solid #000; }
.lib-belt-wrap { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 10px 8px; }
.lib-belt { overflow: hidden; }
.lib-track { display: flex; gap: 12px; width: max-content; will-change: transform; }
.lib-card { flex: none; width: 360px; border: var(--line) solid #000; background: #fff; }
.lib-card header { display: flex; justify-content: space-between; padding: 3px 8px; border-bottom: var(--line) solid #000; font-size: 14px; }
.lib-card-no { font-weight: bold; }
.lib-card-body { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 8px; }
.lib-card figure { margin: 0; display: flex; flex-direction: column; gap: 4px; align-items: center; }
.lib-card figcaption { font-size: 13px; white-space: nowrap; }
.lib-card .lib-art { width: 100%; aspect-ratio: 1; padding: 8px; display: grid; place-items: center; border: var(--line) solid #ccc; }
.lib-card[data-surface="dark"] .lib-art { background: #000; }
.lib-art img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.lib-mini { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; width: 100%; height: 100%; }
.lib-mini i { background: var(--g0) center / contain no-repeat; }
.lib-mini i.on { background-image: var(--g1); }
.lib-controls { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 0 8px 10px; }
.lib-versions { display: flex; flex-wrap: wrap; gap: 4px; }
.lib-chip.is-on { font-weight: bold; }

/* ---- Pop-ups ------------------------------------------------------- */
.modal-overlay { display: none; position: fixed; inset: 0; z-index: 10000; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.85); }
.modal-container { width: 92%; max-width: 520px; max-height: 92vh; overflow: auto; background: #fff; border: 1px solid #000; }
.modal-header { padding: 4px 10px; border-bottom: var(--line) solid #000; font-weight: bold; }
.modal-body { padding: 10px 12px 12px; }
.modal-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.bmac-progress-track { height: 5px; background: #ddd; }
#bmac-progress-bar { height: 100%; background: #000; }
.processing-overlay { display: none; position: fixed; inset: 0; z-index: 9999; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.92); }
.processing-container { max-width: 480px; padding: 16px; background: #fff; border: 1px solid #000; text-align: center; }
#processing-text { font-weight: bold; margin: 8px 0; }
.insta-top-popup { position: fixed; top: 0; left: 0; right: 0; z-index: 9800; transform: translateY(-110%); transition: transform 0.3s ease; background: #fff; border-bottom: var(--line) solid #000; }
.insta-top-popup.show { transform: none; }
.insta-popup-content { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; padding: 6px 10px; }
.insta-popup-text { display: flex; flex-direction: column; }
.insta-popup-title { font-weight: bold; }
.coming-soon-container { text-align: center; padding: 40px 0; }

/* ---- Walkthrough --------------------------------------------------- */
.tut-spot { position: fixed; z-index: 9000; pointer-events: none; opacity: 0; box-shadow: 0 0 0 3px #00e, 0 0 0 200vmax rgba(255, 255, 255, 0.78); }
.tut-spot.is-on { opacity: 1; }
.tut-coach { position: fixed; z-index: 9001; width: 340px; max-width: calc(100vw - 24px); max-height: calc(100vh - 24px); overflow-y: auto; padding: 10px 12px 12px; background: #fff; border: 1px solid #000; display: none; }
.tut-coach.is-on { display: block; }
.tut-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 14px; }
.tut-end { margin-left: auto; }
.tut-title { margin: 6px 0 4px; }
.tut-text { margin: 0 0 8px; }
.tut-more-btn { display: block; margin: 0 0 8px; padding: 0; background: none; border: 0; color: #00e; text-decoration: underline; font: inherit; }
.tut-more { margin: 0 0 8px; padding: 6px 8px; border: var(--line) solid #000; font-size: 15px; }
.tut-more ol, .tut-more ul { margin: 0.3em 0; padding-left: 1.3em; }
.tut-dots { display: flex; gap: 4px; margin: 0 0 8px; }
.tut-dots i { flex: 1; height: 3px; background: #ccc; }
.tut-dots i.done { background: #777; }
.tut-dots i.on { background: #00e; }
.tut-actions { display: flex; gap: 8px; }
.tut-offer { z-index: 9500; }
.tut-offer-plate h3 { margin-top: 0; }
.tut-offer-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.tut-offer-note { font-size: 14px; color: #444; }
body.tut-active #logo-floating-widget, body.tut-active #bmac-floating-widget { opacity: 0.3; }

/* ---- Narrow screens ------------------------------------------------ */
@media (max-width: 1100px) {
  .creator-grid { grid-template-columns: 280px minmax(0, 1fr); }
  .panel-right { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .creator-grid, .ab-top, .ab-two, .ab-media, .ab-quad, .glyph-correlation-top-grid { grid-template-columns: minmax(0, 1fr); }
  .ab-steps { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ab-arrow { margin: 0; }
  .ab-arrow::before { content: '\2193'; }
  .ab-step-figure { height: auto; }
  .creator-bio-grid { flex-direction: column; }
  .lib-card { width: 290px; }
  .lib-belt-wrap { grid-template-columns: minmax(0, 1fr); }
  .lib-belt-wrap .lib-arrow { display: none; }
}

/* ================================================================== */
/* Round 6                                                             */
/* ================================================================== */

/* No custom cursor in this version */
#custom-cursor, #btn-toggle-custom-cursor { display: none !important; }

/* The ś mark is a white image: invert it so it shows on a white page */
.no-glyph-inline, #logo-floating-widget img, .footer-logo-link img { filter: invert(1); }

/* The footer always sits at the bottom of the window, even on a short page */
body { display: flex; flex-direction: column; min-height: 100vh; padding-bottom: 12px; }
.main-header { width: 100%; max-width: none; }
.content-container { flex: 1 0 auto; width: 100%; max-width: none; }
.main-footer { width: 100%; max-width: none; margin-top: 32px; flex: none; }

/* Rules under titles and between sections */
h1, h2, h3 { padding-bottom: 3px; border-bottom: var(--line) solid #000; }
.panel-title, .card-title { border-bottom: 0; }
.st h1, .st h2 { border-bottom: 0; padding-bottom: 0; }
.ab > * { padding-top: 12px; border-top: var(--line) solid #000; }
.ab > *:first-child { border-top: 0; padding-top: 0; }
.ab-plate + .ab-plate, .ab-stack .ab-plate + .ab-plate { padding-top: 12px; border-top: var(--line) solid #000; }
.weight-controller { border: 0; border-top: var(--line) solid #000; border-bottom: var(--line) solid #000; padding: 10px 0; }
.specimen-section-title { padding-top: 8px; border-top: var(--line) solid #000; }
.specimen-section-title:first-child { border-top: 0; padding-top: 0; }
.download-grid { border-top: var(--line) solid #000; border-bottom: var(--line) solid #000; }
.download-card:first-child { border-top: 0; }
.lib-hero { padding-bottom: 10px; border-bottom: var(--line) solid #000; }
.lib-controls { padding-top: 10px; border-top: var(--line) solid #000; }
.section-label { padding-bottom: 2px; border-bottom: var(--line) solid #000; }
.tut-title { padding-bottom: 3px; border-bottom: var(--line) solid #000; }

/* Start page: one typeface, the default sizes, rules between the parts */
.st { max-width: 720px; }
.st hr { margin: 14px 0; }
.st h1 { font-size: 2em; margin: 0 0 0.2em; }
.st h2 { font-size: 1.5em; margin: 0 0 0.2em; }
.st p { margin: 0.3em 0; }
.startup-logo-matrix { margin: 18px 0 8px; }
.startup-subtitle { font-size: 1em; }
.st-primary { border: 0; padding: 0; margin: 0; }
.st-primary .card-title { font-size: 1.5em; }
.st-primary .btn { font-size: 1em; padding: 3px 10px; }
.st-items { display: block; margin: 0; padding-left: 1.4em; }
.st-items li { margin: 4px 0; }
.st-items .nav-link.active, .st-note .nav-link.active { font-weight: normal; color: #00e; text-decoration: underline; }
.st-note { font-size: 1em; }

/* Creator: uses the whole width, and the preview gets the room */
.creator-grid { grid-template-columns: 264px minmax(0, 1fr) 284px; gap: 20px; }
.panel-center { position: sticky; top: 8px; }
.canvas-viewport { min-height: 560px; max-height: calc(100vh - 150px); }
.canvas-viewport.fit-mode { max-height: calc(100vh - 150px); }
#sample-text-area { font-size: 1.05em; }
.panel-left .panel-body, .panel-right .panel-body { font-size: 15px; }

/* Glyph designer: quieter. Selected cells are grey, not black. */
.designer-interactive-grid { grid-template-columns: repeat(4, 32px); grid-auto-rows: 32px; gap: 2px; }
.designer-cell { border-color: #999; }
.designer-cell.active { background: #bbb; }

/* Library: the letter is drawn with the glyphs edge to edge, no gaps and no drift */
.lib-card .lib-art { overflow: hidden; }
.lib-mini { gap: 0; width: 100%; height: auto; aspect-ratio: 1; grid-auto-rows: 1fr; }
.lib-mini i { display: block; min-width: 0; min-height: 0; background-size: 100% 100%; }

/* Text Copier */
.copier-container .binary-stream-card { margin-top: 12px; }
#analysis-phrase-asset-container .label, .text-display-card .label { display: block; font-weight: bold; }
.map-binary { max-width: 220px; text-align: center; font-size: 13px; }

@media (max-width: 1100px) {
  .creator-grid { grid-template-columns: 250px minmax(0, 1fr); }
  .panel-center { position: static; }
  .canvas-viewport { min-height: 380px; }
}
@media (max-width: 760px) {
  .creator-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ================================================================== */
/* Round 7                                                             */
/* ================================================================== */
[hidden] { display: none !important; }

/* Pages are centred again; only the Creator runs the full width */
.st, .font-layout, .about-container, .library-container, .copier-container { margin-left: auto; margin-right: auto; }

/* Glyph designer: adding a character */
.designer-add-row { display: flex; gap: 6px; }
.designer-add-row input { flex: 1; min-width: 0; }
.designer-add-help { font-size: 14px; margin: 4px 0 8px; }

/* ================================================================== */
/* Round 8: phones and small screens                                   */
/* Phones are detected two ways: a narrow screen (max-width 760px) and */
/* a touch screen (pointer: coarse). No feature is hidden on either.   */
/* ================================================================== */

/* Notes opened by tapping an asterisk (works everywhere, needed on touch) */
.term-note { cursor: pointer; }
.note-open { display: block; margin: 2px 0 6px; padding: 4px 8px; border-left: 1px solid #00e; font-size: 14px; }

/* Full screen preview: the way back */
.fs-exit { position: fixed; top: 10px; right: 10px; z-index: 10001; font: inherit; font-weight: bold; padding: 8px 12px; }

/* The pin button only matters where the preview can be pinned */
.pin-preview { display: none; }

/* ---- Touch screens: bigger targets, no zoom-in on focus ------------ */
@media (pointer: coarse) {
  button, .btn, select, input[type="text"], input[type="number"], textarea, .tab-btn, .lib-chip { min-height: 40px; }
  select, input[type="text"], input[type="number"], textarea { font-size: 16px; }   /* stops iOS from zooming the page */
  input[type="checkbox"] { width: 22px; height: 22px; }
  input[type="range"] { height: 32px; }
  #input-zoom { height: 32px !important; width: 120px !important; }
  input[type="color"] { min-width: 44px; min-height: 36px; }
  .designer-interactive-grid { grid-template-columns: repeat(4, 44px); grid-auto-rows: 44px; }
  .grid-cell-btn { min-height: 0; }
  .map-char-btn { min-height: 40px; }
  .weight-label { padding: 8px 2px; }
  .nav-link { padding: 8px 0; }
}

/* ---- Narrow screens ------------------------------------------------- */
@media (max-width: 760px) {
  body { padding: 0 10px 64px; }

  /* Header: logo on one line, every section on one scrolling row */
  .main-header { flex-direction: column; align-items: stretch; gap: 4px; padding: 8px 0 0; }
  .logo-container { justify-content: space-between; }
  .main-nav { flex-wrap: nowrap; overflow-x: auto; gap: 18px; padding: 2px 0 8px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .main-nav > * { flex: none; white-space: nowrap; }

  /* Every two-column block becomes one column */
  .creator-grid, .ab-top, .ab-two, .ab-media, .ab-quad, .glyph-correlation-top-grid, .full-sheet-actions { grid-template-columns: minmax(0, 1fr) !important; }
  .glyph-showcase-card { min-height: 0 !important; }

  /* Creator: the preview comes first and stays pinned at the top while the controls scroll */
  .creator-grid { display: flex !important; flex-direction: column; gap: 14px; }
  .panel-center { order: -1; }
  .panel-center.is-pinned { position: sticky; top: 0; z-index: 50; background: #fff; box-shadow: 0 6px 0 -5px #000; }
  .pin-preview { display: inline-block; }
  .panel-center .panel-header { gap: 6px 10px; }
  .panel-center .panel-body { padding: 6px; }
  .panel-center #sample-text-area { min-height: 44px; height: 44px; }
  .panel-center .text-meta { display: none; }
  .canvas-viewport { min-height: 0; height: 30vh; max-height: none; padding: 6px; }
  .canvas-viewport.fit-mode { max-height: none; height: 30vh; }
  /* During the walkthrough the preview is not pinned, so it never covers the step being explained */
  body.tut-active .panel-center.is-pinned { position: static; box-shadow: none; }
  .control-group, .text-input-wrapper { scroll-margin-top: 12px; }

  /* Floating buttons: smaller and clear of the content */
  #logo-floating-widget, #bmac-floating-widget { bottom: 10px !important; width: 40px !important; height: 40px !important; padding: 0 !important; }

  /* Walkthrough: the plate becomes a panel along the bottom of the screen */
  .tut-coach { left: 8px !important; right: 8px; top: auto !important; bottom: 8px; width: auto; max-width: none; max-height: 46vh; }

  /* About */
  .ab-steps { padding: 10px; }
  .bio-photo-wrapper { width: 140px; }
  iframe { height: 300px !important; }

  /* Library */
  .lib-belt { touch-action: pan-y; }
  .lib-card { width: 280px; }

  /* The Font */
  .weight-labels { justify-content: space-between; }
  .specimen-large { font-size: 28px; max-height: 260px; }

  /* Pop-ups */
  .modal-actions { flex-direction: column; }
  .modal-actions > * { width: 100%; text-align: center; }
}
@media (max-width: 760px) {
  .creator-grid > *, .canvas-wrapper, .canvas-viewport { min-width: 0; max-width: 100%; }
  .main-header, .logo-container { min-width: 0; max-width: 100%; }
  .logo-container { flex-wrap: wrap; }
  .insta-popup-content { flex-wrap: wrap; }
}
@media (max-width: 760px) {
  .main-header > * { min-width: 0; }
  .main-nav { width: 100%; max-width: 100%; min-width: 0; }
}
@media (max-width: 760px) {
  /* Pinned preview kept to about 40% of the screen: its controls run on one scrolling row */
  .panel-center .panel-header { flex-wrap: nowrap; overflow-x: auto; padding: 4px 6px; gap: 10px; -webkit-overflow-scrolling: touch; }
  .panel-center .panel-header > * { flex: none; }
  .panel-center .preview-actions { flex-wrap: nowrap; gap: 8px; }
  .panel-center .preview-actions > * { flex: none; white-space: nowrap; }
  .panel-center .text-input-wrapper { margin-bottom: 6px !important; }
  .panel-center .text-input-wrapper .field-label { font-size: 13px; margin: 0; }
  .canvas-viewport, .canvas-viewport.fit-mode { height: 24vh; }
}

/* ================================================================== */
/* Round 9                                                             */
/* ================================================================== */
.export-note, .diagram-note { font-size: 14px; margin: 3px 0 10px; }
.export-actions .full-sheet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.metadata-title { font-weight: bold; padding-bottom: 2px; margin-bottom: 4px; border-bottom: var(--line) solid #000; }

/* Walkthrough on phones: room to scroll a tall section clear of the plate */
@media (max-width: 760px) {
  body.tut-active { padding-bottom: 62vh; }
  .tut-coach { padding: 8px 10px 10px; }
  .tut-title { margin: 4px 0 3px; }
  .tut-offer-plate { max-height: 90vh; overflow-y: auto; }
  .tut-offer-actions { flex-direction: column; }
  .tut-offer-actions .btn { width: 100%; }
}

/* ================================================================== */
/* Round 10: lighter pages                                             */
/* ================================================================== */
/* Long pages: sections far off screen are not laid out or painted until they are near */
.ab > * { content-visibility: auto; contain-intrinsic-size: auto 480px; }
.ab > *:first-child { content-visibility: visible; }
.bio-photo { height: auto; }

/* ================================================================== */
/* Round 12: on phones the Text Copier is offered as prominently as the Creator */
/* ================================================================== */
.st-phone-only { display: none; }
@media (max-width: 760px), (pointer: coarse) {
  .st-phone-only { display: block; }
  .st-desk-only { display: none; }
  .st-primary .btn { width: 100%; min-height: 44px; }
  .st-primary .btn.nav-link { font-weight: normal; padding: 3px 10px; }
}

/* ---------- Round 14: Matrix Code NFI credit ---------- */
.font-credit { font-size: 14px; margin: 14px 0 0; max-width: 70ch; }

/* ======================================================================
   Round 15: hairlines, guides, schematic
   ----------------------------------------------------------------------
   LINES   Every separating rule and frame is a hairline (--line). Rules that
           used to be 2px or 3px for emphasis are now 1px.
   GUIDES  The page sits on a simple set of guides, all multiples of 8px:
             --u       8px   the unit; text lines are 3 units (24px) apart
             --gutter  24px  the gap between columns
             --margin  the page edge, always wider than the gutter
           Reading pages use 12 columns of 72px (1128px in all). The start page
           takes 8 of them (744px); About splits 8 + 4, then 6 + 6.
           Space between things only comes in steps: 8, 16, 24, 48.
   ====================================================================== */
:root {
  --line: 0.5px;
  --u: 8px;
  --gutter: 24px;
  --margin: clamp(16px, 4vw, 56px);
  --cols-12: 1128px;
  --cols-8: 744px;
}

/* ---- Guides: page frame ---- */
body { padding-left: var(--margin); padding-right: var(--margin); line-height: 1.5; }
.main-header { padding: 16px 0 8px; gap: 8px 24px; }
.content-container { padding-top: 24px; }
.main-footer { margin-top: 48px; padding-top: 8px; }
.font-layout, .copier-container, .about-container, .library-container { max-width: var(--cols-12); }
.st { max-width: var(--cols-8); }

/* ---- Guides: reading pages keep one rhythm ---- */
.st p, .ab p, .font-layout p, .copier-container p, .library-container p { margin: 0 0 16px; }
.ab p, .font-hero-header p, .st p, .st-note, .lib-hero p { max-width: 68ch; }
.ab h3, .font-layout h2, .copier-container h2, .library-container h2 { margin: 0 0 16px; padding-bottom: 8px; }
.system-code { display: block; margin-bottom: 8px; font-size: 12px; letter-spacing: 0.08em; }

/* Start page */
.startup-logo-matrix { margin: 48px 0 16px; }
.st hr { margin: 24px 0; }
.st h1 { margin: 0 0 8px; }
.st h2 { margin: 0 0 8px; }
.st-item { margin: 8px 0; }

/* About: 8 + 4 columns, then 6 + 6; sections 48px apart */
.ab-top { gap: var(--gutter); }
@media (min-width: 1101px) { .ab-top { grid-template-columns: minmax(0, 744fr) minmax(0, 360fr); } }
.ab-two, .ab-media { gap: var(--gutter); }
.ab-quad { gap: 8px var(--gutter); }
.ab-stack { gap: 24px; }
.ab > * { margin-top: 48px; padding-top: 24px; }
.ab > *:first-child { margin-top: 0; padding-top: 0; }
.ab-sub { margin-top: 24px; padding-top: 24px; }
.ab-plate + .ab-plate, .ab-stack .ab-plate + .ab-plate { padding-top: 24px; }

/* The Font, Text Copier, My Library */
.weight-controller { margin: 24px 0; padding: 16px 0; }
.specimen-section-title { padding-top: 16px; margin-top: 16px; }
.download-grid { margin-top: 24px; }
.download-card { padding: 16px 0; }
.font-credit { margin-top: 24px; }
.lib-hero { padding-bottom: 24px; }
.lib-controls { padding-top: 16px; }

/* Creator: panels on the same gutter */
.creator-grid { gap: var(--gutter); }
.panel-header { padding: 8px; }
.control-group { padding: 8px 0 16px; }

/* ---- Schematic: the About diagram drawn like an old wiring sheet ----
   Hairlines only. One frame around each grid instead of a box per cell, thin
   symbols, small spaced captions, and plain connector lines ending in a square
   terminal in place of arrows. */
.ab-steps { grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr) 72px minmax(0, 1fr); margin: 24px 0; padding: 32px 0 24px; border: 0; border-top: var(--line) solid #000; border-bottom: var(--line) solid #000; }
.ab-step { gap: 8px; }
.ab-step-figure { height: 152px; }
.ab-step-label, .ab-cap { font-size: 12px; letter-spacing: 0.08em; font-weight: normal; }
.ab-cap strong { font-weight: normal; }
.ab-step-note { font-size: 13px; max-width: 24ch; }
.ab-shapes { gap: 24px; }
.ab-cell { width: 48px; height: 48px; border: var(--line) solid #000; }
.ab-cell.is-1 i { top: 16%; bottom: 16%; width: 2px; margin-left: -1px; }
.ab-cell.is-0 i { inset: 22%; border: 1px solid #000; }
.ab-grid { grid-template-columns: repeat(4, 30px); grid-auto-rows: 30px; gap: 0; padding: 8px; border: var(--line) solid #000; }
.ab-grid .ab-cell { border: 0; background: transparent; }
.ab-grid .ab-cell.is-0 i { border-width: 1px; inset: 24%; }
.ab-grid .ab-cell.is-1 i { top: 14%; bottom: 14%; }
.ab-cell-index span { font-size: 10px; }
.ab-cell-index u { inset: 4px; }
.ab-ghost { font-size: 120px; font-weight: normal; }
.ab-arrow { margin-top: 76px; height: 0; border-top: var(--line) solid #000; position: relative; }
.ab-arrow::before { content: ''; position: absolute; right: 0; top: -3px; width: 5px; height: 5px; background: #000; font-size: 0; }
.ab-arrow::after { content: ''; position: absolute; left: 0; top: -2px; width: 3px; height: 3px; border-radius: 50%; background: #000; }
.ab-array { font-size: 13px; letter-spacing: 0.04em; margin-bottom: 24px; }
.ab-array .system-code { display: inline; margin: 0; }

/* The grid lab and the other small grids use the same hairlines */
/* Each line is drawn once: a cell draws only its top and left edge, the grid closes the
   right and bottom. No two borders ever sit side by side, so every line is the same. */
.matrix-interactive-grid { gap: 0; width: max-content; border-right: var(--line) solid #000; border-bottom: var(--line) solid #000; }
.matrix-interactive-grid .grid-cell-btn { margin: 0; border: 0; border-top: var(--line) solid #000; border-left: var(--line) solid #000; border-radius: 0; }

@media (max-width: 760px) {
  .ab > * { margin-top: 32px; }
  .startup-logo-matrix { margin-top: 24px; }
  .ab-steps { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 24px 0; }
  .ab-step-figure { height: auto; }
  .ab-arrow { margin: 0 auto; width: 0; height: 32px; border-top: 0; border-left: var(--line) solid #000; }
  .ab-arrow::before { content: ''; right: auto; left: -3px; top: auto; bottom: 0; }
  .ab-arrow::after { left: -2px; top: 0; }
}

/* The logo that replaces the "ś" in the name sits like a character, as on the portfolio:
   the drawing (not the image's empty margin) stands on the baseline, is as tall as a
   capital letter, and keeps a letter's spacing, so the name does not jump on hover. */
.name-s .no-glyph-inline { height: 0.792em; width: 0.792em; max-width: none; vertical-align: -0.065em; margin: 0 -0.135em 0 -0.143em; }

/* The logo standing in for the "ś" in the About text sits like a character too. */
.bio-text .no-glyph-inline { height: 0.792em; width: 0.792em; max-width: none; vertical-align: -0.065em; margin: 0 -0.135em 0 -0.143em; }

/* ---------- Round 17: header logo, start page as an index ----------
   START PAGE  Two parts on the 12-column guides. Left (8 columns): the title in BiType
   at the scale of the name on the portfolio, with a key under it: each grid above, its
   letter below, so the system explains itself. Right (4 columns): the contents as a
   numbered index, one hairline per entry. The name closes the page at the bottom. */
.st-index-page { --logo: clamp(44px, 7vw, 100px); max-width: var(--cols-12); min-height: calc(100vh - 240px); display: grid; grid-template-columns: minmax(0, 744fr) minmax(0, 360fr); grid-template-rows: auto 1fr; gap: 48px var(--gutter); padding-top: 12vh; }
.st-index-page .startup-logo-matrix { font-size: var(--logo); margin: 0; line-height: 1; white-space: nowrap; }
.st-key { display: grid; grid-template-columns: repeat(6, 1em); font-size: var(--logo); margin: 8px 0 40px; }
.st-key span { font-size: 13px; letter-spacing: 0.08em; text-align: center; }
.st-index-page .st-line { font-size: clamp(22px, 2.4vw, 32px); font-weight: normal; line-height: 1.15; margin: 0 0 8px; padding: 0; border: 0; }
.st-index-page .st-sub { margin: 0; }
.st-index { display: flex; flex-direction: column; align-self: start; border-bottom: var(--line) solid #000; }
.st-index a { display: grid; grid-template-columns: 32px auto 1fr; align-items: baseline; gap: 0 8px; padding: 12px 0; border-top: var(--line) solid #000; color: #000; text-decoration: none; }
.st-index .st-no { font-size: 12px; letter-spacing: 0.08em; }
.st-index .st-name { font-size: 20px; color: #00e; text-decoration: underline; }
.st-index .st-what { font-size: 14px; text-align: right; }
.st-index a.nav-link.active { font-weight: normal; }
.st-index #card-advanced-creator { padding: 16px 0; }
.st-index #card-advanced-creator .st-name { font-size: 26px; font-weight: bold; }
.st-index #card-advanced-creator .st-name::after { content: ' \2192'; }
.st-index-page .startup-subtitle { grid-column: 1 / -1; align-self: end; margin: 0; font-size: 16px; }

/* HEADER LOGO  Large enough for the 1s and 0s to be read. */
.header-logo-matrix { font-size: 40px; }
.logo-container { align-items: center; gap: 16px; }
.main-header { align-items: center; }

@media (max-width: 1100px) {
  .st-index-page { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; gap: 40px; padding-top: 6vh; }
}
@media (max-width: 760px) {
  .st-index-page { --logo: min(calc((100vw - 2 * var(--margin)) / 6.1), 64px); padding-top: 16px; gap: 32px; min-height: 0; }
  .st-key { margin-bottom: 24px; }
  .st-index a { padding: 14px 0; }
  .st-index .st-name { font-size: 22px; }
  .header-logo-matrix { font-size: 30px; }
}

/* About: use cases */
.ab-uses .ab-quad { margin: 0 0 16px; gap: 0 var(--gutter); }
.ab-uses .ab-quad-item { padding: 12px 0; border-top: var(--line) solid #000; }
.ab-uses .ab-quad-item p { margin: 0; }