/* OTACONSKEEP command-deck design system
 Single committed dark aesthetic (intentional, not theme-dependent). */

:root {
 --keep-ref: #8db3d9;
 --keep-ref-dim: #33455e;
 --bg: #090c11;
 --bg-elevated: #0e131b;
 --surface: #121926;
 --surface-2: #17202f;
 --line: #1e2a3b;
 --line-bright: #2d3e56;
 --cream: #e4edf5;
 --cream-dim: #8ea0b6;
 --cream-faint: #556579;
 --accent: #16a893;
 --accent-bright: #39e6c8;
 --accent-dim: #0e5f52;
 --signal: #43d98a;
 --signal-dim: #226b48;
 --danger: #ef5f6b;
 --warn: #e0a83c;
 --warn-dim: #8a641f;
 --radius: 4px;
 --max: 1080px;
 --shadow: 0 0 0 1px rgba(57, 230, 200, 0.06), 0 16px 40px rgba(0, 0, 0, 0.55);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
 html { scroll-behavior: auto; }
 * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body {
 margin: 0;
 background: var(--bg);
 background-image:
 radial-gradient(ellipse at top left, rgba(57, 230, 200, 0.05), transparent 55%),
 repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 3px);
 color: var(--cream);
 font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
 line-height: 1.65;
 font-size: 16px;
 -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-bright); text-decoration-color: rgba(94, 240, 216, 0.4); }
a:hover { text-decoration-color: currentColor; }
a:focus-visible, button:focus-visible, summary:focus-visible {
 outline: 2px solid var(--accent);
 outline-offset: 3px;
}

.mono {
 font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

h1, h2, h3, h4 { margin: 0; font-weight: 800; overflow-wrap: break-word; }

.display {
 font-family: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
 text-transform: uppercase;
}

.wrap {
 max-width: var(--max);
 margin: 0 auto;
 padding: 0 24px;
}

/* nav */
.topnav {
 position: sticky;
 top: 0;
 z-index: 20;
 background: rgba(9, 12, 17, 0.92);
 backdrop-filter: blur(6px);
 border-bottom: 1px solid var(--line);
}
.topnav .wrap {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 16px;
 padding-top: 14px;
 padding-bottom: 14px;
}
.brand {
 display: flex;
 flex-direction: row;
 align-items: center;
 gap: 8px;
 font-family: 'Bricolage Grotesque', sans-serif;
 font-weight: 800;
 letter-spacing: 0.04em;
 font-size: 1.15rem;
 text-transform: uppercase;
 color: var(--cream);
 text-decoration: none;
}
.brand:hover { color: var(--accent-bright); }
.brand-avatar {
 width: 34px;
 height: 52px;
 object-fit: contain;
 object-position: bottom;
 flex-shrink: 0;
}
.brand-text {
 display: flex;
 flex-direction: column;
 line-height: 1.2;
}
.brand-byline {
 font-family: 'JetBrains Mono', ui-monospace, monospace;
 font-weight: 500;
 letter-spacing: 0.02em;
 text-transform: none;
 font-size: 0.6rem;
 color: var(--cream-dim);
 margin-top: 1px;
}
.navlinks {
 display: flex;
 flex-wrap: wrap;
 gap: 14px 18px;
 font-family: 'JetBrains Mono', monospace;
 font-size: 0.78rem;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 align-items: center;
}
.navlinks a { color: var(--cream-dim); text-decoration: none; }
.navlinks a:hover, .navlinks a[aria-current="page"] { color: var(--accent-bright); }
.navlinks a.discord { color: var(--accent); border: 1px solid var(--accent-dim); padding: 6px 12px; border-radius: 4px; }
.navlinks a.discord:hover { background: rgba(57, 230, 200, 0.12); color: var(--accent-bright); }
.navdrop { position: relative; }
.navdrop-menu {
 display: none;
 position: absolute;
 top: calc(100% + 10px);
 left: 0;
 min-width: 190px;
 padding: 8px 0;
 background: var(--bg-elevated);
 border: 1px solid var(--line);
 box-shadow: var(--shadow);
 z-index: 30;
 flex-direction: column;
 gap: 2px;
}
.navdrop:hover .navdrop-menu,
.navdrop:focus-within .navdrop-menu { display: flex; }
.navdrop-menu a { padding: 8px 14px; letter-spacing: 0.06em; }
.navtoggle { display: none; }

@media (max-width: 700px) {
 .navlinks {
 position: absolute;
 top: 100%;
 left: 0;
 right: 0;
 background: var(--bg-elevated);
 border-bottom: 1px solid var(--line);
 flex-direction: column;
 align-items: flex-start;
 padding: 18px 24px;
 gap: 16px;
 display: none;
 }
 .navlinks.open { display: flex; }
 .navdrop-menu {
  position: static;
  display: flex;
  min-width: 0;
  padding: 4px 0 4px 12px;
  border: 0;
  box-shadow: none;
  background: transparent;
 }
 .navtoggle {
 display: inline-flex;
 background: transparent;
 border: 1px solid var(--line-bright);
 color: var(--cream);
 border-radius: 4px;
 padding: 7px 10px;
 font-family: 'JetBrains Mono', monospace;
 cursor: pointer;
 }
}

/* filebar (thin meta strip) */
.filebar {
 position: relative;
 border-bottom: 1px solid var(--line);
 font-family: 'JetBrains Mono', monospace;
 font-size: 0.68rem;
 letter-spacing: 0.09em;
 text-transform: uppercase;
 color: var(--cream-faint);
 overflow: hidden;
}
.filebar::after {
 content: '';
 position: absolute;
 left: 0; right: 0; bottom: -1px;
 height: 1px;
 background: linear-gradient(90deg, transparent, var(--accent-bright), transparent);
 background-size: 200% 100%;
 animation: filebar-sweep 6s linear infinite;
 opacity: 0.55;
}
@keyframes filebar-sweep {
 0% { background-position: 200% 0; }
 100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
 .filebar::after { animation: none; background-position: 0 0; }
}
.filebar .wrap {
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
 gap: 8px;
 padding: 9px 24px;
}
.blink::after { content: '_'; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* hero video (contained, not full-bleed) */
.hero-video {
 width: 100%;
 margin: 0;
 padding: 20px 0 8px;
 border: none;
 background: transparent;
 border-bottom: 1px solid var(--line);
}
.hero-video-frame {
 position: relative;
 width: 100%;
 aspect-ratio: 16 / 9;
 overflow: hidden;
 background: #000;
 border: 1px solid var(--line);
 border-radius: var(--radius);
}
.hero-video-frame--compact {
 max-width: 560px;
 margin: 0 auto;
}
.hero-video-frame iframe {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 border: 0;
 display: block;
}

/* hero */
.hero { padding: 64px 0 48px; }
.hero .eyebrow {
 font-family: 'JetBrains Mono', monospace;
 font-size: 0.78rem;
 letter-spacing: 0.16em;
 text-transform: uppercase;
 color: var(--accent-bright);
 margin-bottom: 16px;
}
.hero h1 {
 font-family: 'Bricolage Grotesque', sans-serif;
 font-weight: 900;
 font-size: clamp(3rem, 9vw, 5.5rem);
 line-height: 0.88;
 letter-spacing: -0.005em;
 text-transform: uppercase;
}
.hero p.lede {
 max-width: 56ch;
 font-size: 1.15rem;
 color: var(--cream-dim);
 margin-top: 20px;
}
.hero .meta {
 margin-top: 22px;
 font-family: 'JetBrains Mono', monospace;
 font-size: 0.85rem;
 color: var(--cream-dim);
 border-left: 2px solid var(--line-bright);
 padding-left: 14px;
}
.hero .meta strong { color: var(--cream); font-weight: 600; }

/* buttons */
.btn {
 font-family: 'JetBrains Mono', monospace;
 font-size: 0.85rem;
 letter-spacing: 0.03em;
 text-decoration: none;
 padding: 12px 20px;
 border-radius: 4px;
 border: 1.5px solid transparent;
 display: inline-flex;
 align-items: center;
 gap: 8px;
 cursor: pointer;
 background: none;
 color: var(--cream);
}
.btn-primary { background: var(--accent); color: #04130f; border-color: var(--accent); font-weight: 600; transition: box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease; }
.btn-primary:hover { background: var(--accent-bright); border-color: var(--accent-bright); box-shadow: 0 0 16px rgba(57, 230, 200, 0.45); }
.btn-ghost { border-color: var(--line-bright); color: var(--cream); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-bright); }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* sections */
section { padding: 56px 0; border-top: 1px solid var(--line); }
section.flush { border-top: none; }
.tag {
 font-family: 'JetBrains Mono', monospace;
 font-size: 0.72rem;
 letter-spacing: 0.16em;
 text-transform: uppercase;
 color: var(--accent-bright);
 margin-bottom: 10px;
}
section h2 {
 font-family: 'Bricolage Grotesque', sans-serif;
 font-weight: 800;
 font-size: clamp(1.8rem, 4vw, 2.5rem);
 text-transform: uppercase;
 margin-bottom: 18px;
}
section > p.intro { max-width: 64ch; color: var(--cream-dim); margin-bottom: 28px; }

/* project cards (home) */
.projects { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
@media (max-width: 800px) { .projects { grid-template-columns: 1fr; } }

.project-card {
 background: var(--surface);
 border: 1px solid var(--line);
 border-radius: 8px;
 padding: 28px;
 display: flex;
 flex-direction: column;
 gap: 18px;
 box-shadow: var(--shadow);
 position: relative;
 overflow: visible;
}
.project-card .kicker {
 font-family: 'JetBrains Mono', monospace;
 font-size: 0.7rem;
 letter-spacing: 0.14em;
 text-transform: uppercase;
 color: var(--cream-faint);
}
.project-card h3 {
 font-family: 'Bricolage Grotesque', sans-serif;
 font-weight: 900;
 font-size: 2.1rem;
 line-height: 0.92;
 text-transform: uppercase;
}
.project-card h3 span { display: block; font-size: 0.55em; letter-spacing: 0.12em; color: var(--accent-bright); }
.project-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.project-card li { font-size: 0.92rem; color: var(--cream-dim); display: flex; gap: 9px; align-items: baseline; }
.project-card li::before { content: '›'; color: var(--accent); flex-shrink: 0; }

/* install disclosure */
.install-toggle > summary {
 cursor: pointer;
 list-style: none;
 font-family: 'JetBrains Mono', monospace;
 font-size: 0.85rem;
 color: var(--cream-dim);
 padding-top: 4px;
}
.install-toggle > summary::-webkit-details-marker { display: none; }
.install-toggle > summary::before { content: '▸ '; color: var(--accent); }
.install-toggle[open] > summary::before { content: '▾ '; }

.install-box {
 margin-top: 14px;
 border: 1px solid var(--line);
 border-radius: var(--radius);
 background: var(--bg-elevated);
 padding: 18px;
}
.install-box h4 {
 font-family: 'JetBrains Mono', monospace;
 font-size: 0.75rem;
 letter-spacing: 0.1em;
 text-transform: uppercase;
 color: var(--accent-bright);
 margin-bottom: 10px;
}
.os-block + .os-block {
 margin-top: 20px;
 padding-top: 20px;
 border-top: 1px dashed var(--line);
}
.os-label {
 font-family: 'JetBrains Mono', monospace;
 font-size: 0.68rem;
 letter-spacing: 0.12em;
 text-transform: uppercase;
 color: var(--cream-faint);
 margin-bottom: 10px;
}
.download-btn {
 display: inline-flex;
 align-items: center;
 gap: 9px;
 font-family: 'JetBrains Mono', monospace;
 font-size: 0.88rem;
 font-weight: 600;
 background: var(--accent);
 color: #04130f;
 border-radius: 5px;
 padding: 12px 20px;
 text-decoration: none;
}
.download-btn:hover { background: var(--accent-bright); }
.codebox {
 display: flex;
 align-items: center;
 gap: 10px;
 background: rgba(238, 240, 224, 0.045);
 border: 1px solid var(--line);
 border-radius: 5px;
 padding: 13px 14px;
 overflow-x: auto;
}
.codebox code {
 font-family: 'JetBrains Mono', monospace;
 font-size: 0.82rem;
 white-space: pre;
 flex: 1;
 color: var(--cream);
}

/* obvious one-click install panels */
.install-panel {
 border: 1.5px solid var(--line-bright);
 border-radius: 8px;
 background: var(--bg-elevated);
 padding: 22px;
 display: flex;
 flex-direction: column;
 gap: 16px;
 position: relative;
 overflow: visible;
}
.install-panel + .install-panel { margin-top: 18px; }
.install-panel-head {
 display: flex;
 flex-wrap: wrap;
 align-items: baseline;
 justify-content: space-between;
 gap: 10px 16px;
 padding-bottom: 12px;
 border-bottom: 1px solid var(--line);
}
.install-panel-title {
 font-family: 'Bricolage Grotesque', sans-serif;
 font-weight: 800;
 font-size: clamp(1.45rem, 3vw, 1.85rem);
 text-transform: uppercase;
 letter-spacing: 0.02em;
 margin: 0;
 color: var(--cream);
}
.one-click-badge {
 display: inline-flex;
 align-items: center;
 font-family: 'JetBrains Mono', monospace;
 font-size: 0.72rem;
 font-weight: 600;
 letter-spacing: 0.14em;
 text-transform: uppercase;
 color: #04130f;
 background: var(--accent);
 padding: 6px 10px;
 border-radius: 3px;
}
.install-panel-lead {
 margin: 0;
 color: var(--cream-dim);
 font-size: 0.95rem;
 max-width: 68ch;
}
.install-demo-video {
 margin-top: 4px;
 width: 100%;
 max-width: 100%;
}
.install-demo-video-frame {
 position: relative;
 width: 100%;
 max-width: 280px;
 aspect-ratio: 16 / 9;
 overflow: hidden;
 background: #000;
 border: 1px solid var(--line);
 border-radius: var(--radius);
}
.install-demo-video-frame iframe {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 border: 0;
 display: block;
}
.install-trust-layout {
 display: grid;
 grid-template-columns: minmax(0, 1.2fr) minmax(220px, 0.9fr);
 gap: 14px;
 align-items: start;
 margin-bottom: 12px;
}
@media (max-width: 800px) {
 .install-trust-layout { grid-template-columns: 1fr; }
}
.install-trust-main .install-cta-row,
.install-trust-main {
 display: flex;
 flex-direction: column;
 gap: 10px;
}
.install-trust-main .install-demo-video--inline {
 align-self: flex-start;
}
.install-trust {
 border: 1px solid var(--line-bright);
 border-radius: 7px;
 background: rgba(67, 217, 138, 0.06);
 padding: 14px 14px 12px;
}
.install-trust h4 {
 margin: 0 0 10px;
 font-family: 'Bricolage Grotesque', sans-serif;
 font-size: 0.98rem;
 color: var(--cream);
}
.install-trust ul {
 list-style: none;
 margin: 0;
 padding: 0;
 display: grid;
 gap: 6px;
}
.install-trust li {
 margin: 0;
 color: var(--cream);
 font-size: 0.88rem;
 display: flex;
 gap: 8px;
 align-items: baseline;
}
.install-trust .ok { color: #43d98a; font-weight: 700; }
.install-trust-note {
 margin: 10px 0 0;
 color: var(--cream-dim);
 font-size: 0.8rem;
 line-height: 1.4;
}
.qp-labs-tag {
 margin: 0 !important;
 font-family: 'JetBrains Mono', monospace;
 font-size: 0.7rem;
 letter-spacing: 0.1em;
 text-transform: uppercase;
 color: var(--keep-ref, #8db3d9);
}
.install-cta-row {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 12px 14px;
}
.install-cta-row .download-btn {
 flex: 0 0 auto;
}
.install-demo-video--inline {
 margin: 0;
 width: auto;
 flex: 0 0 auto;
}
.install-demo-video--inline .install-demo-video-frame {
 width: 176px;
 max-width: 176px;
 border-radius: 5px;
}
@media (max-width: 480px) {
 .install-demo-video--inline .install-demo-video-frame {
  width: 148px;
  max-width: 148px;
 }
}
.os-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 14px;
}
@media (max-width: 720px) {
 .os-grid { grid-template-columns: 1fr; }
}
.os-card {
 border: 1px solid var(--line);
 border-radius: 7px;
 background: var(--surface);
 padding: 16px 16px 14px;
 display: flex;
 flex-direction: column;
 gap: 12px;
 min-width: 0;
}
.os-card .os-label {
 font-size: 0.9rem;
 letter-spacing: 0.08em;
 color: var(--accent-bright);
 margin: 0;
 font-weight: 600;
}
.os-card .os-hint {
 margin: 0;
 font-size: 0.86rem;
 color: var(--cream-dim);
 line-height: 1.45;
}

/* Big “this is normal” callout for Windows setup */
.setup-normal-disclaimer {
 margin: 0;
 padding: 16px 16px 14px;
 border: 2px solid var(--accent);
 border-radius: 7px;
 background: rgba(57, 230, 200, 0.12);
}
.setup-normal-disclaimer > strong {
 display: block;
 font-family: 'Bricolage Grotesque', sans-serif;
 font-weight: 800;
 font-size: clamp(1.15rem, 2.6vw, 1.45rem);
 letter-spacing: 0.03em;
 text-transform: uppercase;
 color: var(--accent-bright);
 margin: 0 0 8px;
 line-height: 1.15;
}
.setup-normal-disclaimer > p {
 margin: 0 0 10px;
 font-size: 0.92rem;
 color: var(--cream);
 line-height: 1.4;
 font-weight: 600;
}
.setup-normal-disclaimer ul {
 margin: 0;
 padding: 0 0 0 1.15em;
 display: flex;
 flex-direction: column;
 gap: 8px;
}
.setup-normal-disclaimer li {
 font-size: 0.86rem;
 color: var(--cream-dim);
 line-height: 1.4;
}
.setup-normal-disclaimer li strong {
 color: var(--cream);
 font-weight: 600;
}
.os-card .download-btn {
 width: 100%;
 justify-content: center;
 text-align: center;
 padding: 14px 16px;
 font-size: 0.95rem;
}
.os-card .codebox {
 flex-direction: column;
 align-items: stretch;
 gap: 10px;
}
.os-card .codebox code {
 white-space: pre-wrap;
 word-break: break-all;
 font-size: 0.78rem;
 line-height: 1.45;
}
.os-card .copy-btn {
 align-self: flex-end;
 padding: 8px 14px;
 font-size: 0.78rem;
 border-color: var(--accent-dim);
 color: var(--accent-bright);
}
.os-card .copy-btn:hover {
 border-color: var(--accent);
 background: rgba(232, 140, 48, 0.12);
}
.install-stack {
 display: flex;
 flex-direction: column;
 gap: 18px;
 width: 100%;
}
.project-card .install-stack { margin-top: 4px; }
.btn-install {
 font-family: 'Bricolage Grotesque', sans-serif;
 font-weight: 800;
 font-size: 1.15rem;
 letter-spacing: 0.04em;
 text-transform: uppercase;
 padding: 14px 22px;
}
.btn-secondary-strong {
 background: transparent;
 color: var(--accent-bright);
 border-color: var(--accent);
 font-weight: 700;
}
.btn-secondary-strong:hover {
 background: rgba(232, 140, 48, 0.12);
 border-color: var(--accent-bright);
 color: var(--cream);
}
.copy-btn {
 font-family: 'JetBrains Mono', monospace;
 font-size: 0.72rem;
 letter-spacing: 0.05em;
 background: transparent;
 border: 1px solid var(--line-bright);
 color: var(--cream);
 border-radius: 4px;
 padding: 7px 11px;
 cursor: pointer;
 flex-shrink: 0;
 white-space: nowrap;
}
.copy-btn:hover { border-color: var(--accent); color: var(--accent-bright); }

.warn-note {
 margin-top: 14px;
 font-size: 0.87rem;
 color: var(--cream-dim);
 border-left: 2px solid var(--danger);
 padding-left: 12px;
}
.info-note {
 margin-top: 14px;
 font-size: 0.87rem;
 color: var(--cream-dim);
 border-left: 2px solid var(--signal-dim);
 padding-left: 12px;
}

/* checklist */
.checklist { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.checklist li {
 counter-increment: step;
 display: grid;
 grid-template-columns: 34px 1fr;
 gap: 4px 14px;
 padding: 16px 0;
 border-bottom: 1px dashed var(--line);
}
.checklist li:last-child { border-bottom: none; }
.checklist li::before {
 content: counter(step, decimal-leading-zero);
 font-family: 'JetBrains Mono', monospace;
 font-weight: 600;
 font-size: 0.85rem;
 color: var(--accent-bright);
 grid-column: 1;
 grid-row: 1;
 padding-top: 2px;
}
.checklist li .step-body {
 grid-column: 2;
 grid-row: 1;
 display: flex;
 flex-direction: column;
 gap: 10px;
}
.checklist h4 { margin: 0; font-size: 1rem; font-weight: 700; }
.checklist p { margin: 0; color: var(--cream-dim); font-size: 0.95rem; }

/* status badges / loadout */
.loadout { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 12px; }
.loadout .item {
 background: var(--surface);
 border: 1px solid var(--line);
 border-radius: 6px;
 padding: 16px;
 display: flex;
 flex-direction: column;
 gap: 10px;
 justify-content: space-between;
}
.loadout .item h4 { margin: 0; font-size: 0.96rem; font-weight: 700; }
.badge {
 align-self: flex-start;
 font-family: 'JetBrains Mono', monospace;
 font-size: 0.64rem;
 letter-spacing: 0.05em;
 padding: 3px 8px;
 border-radius: 3px;
 text-transform: uppercase;
}
.badge.validated { color: var(--signal); border: 1px solid var(--signal-dim); }
.badge.pending { color: var(--warn); border: 1px solid var(--warn-dim); }
.badge.planned { color: var(--cream-faint); border: 1px solid var(--line-bright); }

/* tables */
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 6px; }
table { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 480px; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); }
th {
 font-family: 'JetBrains Mono', monospace;
 font-size: 0.7rem;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 color: var(--cream-faint);
 background: var(--surface);
}
tr:last-child td { border-bottom: none; }
td.num { font-variant-numeric: tabular-nums; font-family: 'JetBrains Mono', monospace; }

/* flow diagram */
.flow {
 font-family: 'JetBrains Mono', monospace;
 font-size: 0.85rem;
 background: var(--surface);
 border: 1px solid var(--line);
 border-radius: 6px;
 padding: 20px 22px;
 display: flex;
 flex-wrap: wrap;
 gap: 10px 6px;
 align-items: center;
 overflow-x: auto;
}
.flow .node { background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px; padding: 5px 10px; white-space: nowrap; }
.flow .arrow { color: var(--cream-faint); }

/* stamp */
.stamp {
 display: inline-block;
 border: 1.5px solid var(--accent);
 background: linear-gradient(180deg, rgba(57, 230, 200, 0.1), rgba(57, 230, 200, 0.02));
 color: var(--accent-bright);
 font-family: 'Bricolage Grotesque', sans-serif;
 font-weight: 800;
 text-transform: uppercase;
 font-size: 0.85rem;
 letter-spacing: 0.08em;
 padding: 7px 13px;
 border-radius: 2px;
 text-align: center;
 line-height: 1.25;
 box-shadow: 0 0 18px rgba(57, 230, 200, 0.22), inset 0 0 12px rgba(57, 230, 200, 0.06);
}
.stamp small { display: block; font-size: 0.55rem; letter-spacing: 0.14em; font-weight: 600; opacity: 0.85; }

/* today list (What You Can Do Today) */
.today-panel {
 background: var(--surface);
 border: 1px solid var(--signal-dim);
 border-radius: 8px;
 padding: 26px 28px;
}
.today-panel .kicker {
 font-family: 'JetBrains Mono', monospace;
 font-size: 0.72rem;
 letter-spacing: 0.14em;
 text-transform: uppercase;
 color: var(--signal);
 margin-bottom: 6px;
}
.today-list { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.today-list li { display: flex; gap: 11px; align-items: flex-start; font-size: 0.96rem; }
.today-list .ok { color: var(--signal); font-family: 'JetBrains Mono', monospace; flex-shrink: 0; margin-top: 0.1em; }

/* 4-way status legend */
.legend {
 display: flex;
 flex-wrap: wrap;
 gap: 10px 22px;
 font-family: 'JetBrains Mono', monospace;
 font-size: 0.72rem;
 letter-spacing: 0.05em;
 text-transform: uppercase;
 margin-bottom: 22px;
}
.legend span { display: flex; align-items: center; gap: 7px; color: var(--cream-dim); }
.legend .dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.badge.keep-ref { color: var(--keep-ref); border: 1px solid var(--keep-ref-dim); }
.legend .dot.available { background: var(--signal); }
.legend .dot.provider { background: var(--warn); }
.legend .dot.keep-ref { background: var(--keep-ref); }
.legend .dot.planned { background: var(--cream-faint); }

/* reference-environment emphasis block */
.reference-block {
 background: linear-gradient(180deg, var(--surface-2), var(--surface));
 border: 1px solid var(--line-bright);
 border-radius: 10px;
 padding: 40px 36px;
}
.reference-block h2 {
 font-size: clamp(1.9rem, 4.4vw, 2.8rem);
 color: var(--accent-bright);
}
.reference-block p.lede2 {
 max-width: 68ch;
 font-size: 1.08rem;
 color: var(--cream-dim);
 margin: 16px 0 26px;
}
.reference-tag {
 display: inline-block;
 font-family: 'JetBrains Mono', monospace;
 font-size: 0.72rem;
 letter-spacing: 0.09em;
 text-transform: uppercase;
 color: var(--keep-ref);
 border: 1px solid var(--keep-ref-dim);
 border-radius: 4px;
 padding: 6px 12px;
 margin-bottom: 18px;
}
.reference-block ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 10px 20px; }
.reference-block li { font-size: 0.93rem; color: var(--cream-dim); display: flex; gap: 9px; }
.reference-block li::before { content: '›'; color: var(--keep-ref); flex-shrink: 0; }

/* progression (vertical) */
.progression {
 font-family: 'JetBrains Mono', monospace;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 2px;
}
.progression .step {
 background: var(--surface);
 border: 1px solid var(--line);
 border-radius: 5px;
 padding: 10px 22px;
 font-size: 0.85rem;
 letter-spacing: 0.04em;
 text-transform: uppercase;
 text-align: center;
 min-width: 220px;
}
.progression .step.core { border-color: var(--signal-dim); color: var(--signal); }
.progression .step.keep { border-color: var(--keep-ref-dim); color: var(--keep-ref); }
.progression .step.desk {
 border-color: color-mix(in srgb, var(--accent-bright) 55%, var(--line));
 color: var(--accent-bright);
}
.progression .step .step-note {
 display: block;
 font: 500 0.68rem JetBrains Mono, monospace;
 color: var(--cream-faint);
 margin-top: 4px;
 letter-spacing: 0.02em;
}
.progression .arrow-down { color: var(--cream-faint); font-size: 0.9rem; line-height: 1; padding: 2px 0; }
.progression-caption { text-align: center; max-width: 58ch; margin: 20px auto 0; color: var(--cream-dim); font-size: 0.92rem; }
.legend .dot.desk { background: var(--accent-bright); }

/* umbrella tree (ascii-style, real monospace) */
.treebox {
 font-family: 'JetBrains Mono', monospace;
 font-size: 0.86rem;
 line-height: 1.55;
 background: var(--bg-elevated);
 border: 1px solid var(--line);
 border-radius: 8px;
 padding: 22px 24px;
 overflow-x: auto;
 white-space: pre;
 color: var(--cream-dim);
}
.treebox strong { color: var(--accent-bright); }
.keep-diagram-figure {
 background: var(--bg-elevated);
 border: 1px solid var(--line);
 border-radius: 8px;
 padding: 20px;
 margin: 0;
 overflow-x: auto;
}
.keep-diagram-figure svg { display: block; min-width: 560px; }
.diagram-caption {
 font-size: 0.82rem;
 color: var(--cream-faint);
 font-style: italic;
 margin-top: 10px;
}

/* real screenshot card */
.shot-grid {
 display: grid;
 grid-template-columns: minmax(220px, 340px) 1fr;
 gap: 26px;
 align-items: start;
}
@media (max-width: 700px) { .shot-grid { grid-template-columns: 1fr; } }
.shot-card {
 border: 1px solid var(--line);
 border-radius: 8px;
 overflow: hidden;
 background: var(--surface);
 margin: 0;
 box-shadow: var(--shadow);
}
.shot-card img { display: block; width: 100%; height: auto; }
.shot-card figcaption {
 padding: 12px 14px;
 font-family: 'JetBrains Mono', monospace;
 font-size: 0.78rem;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 color: var(--accent-bright);
 border-top: 1px solid var(--line);
 background: var(--bg-elevated);
}
.project-demo { max-width: 100%; }
.livecheck h4 {
 font-family: 'JetBrains Mono', monospace;
 font-size: 0.75rem;
 letter-spacing: 0.1em;
 text-transform: uppercase;
 color: var(--signal);
 margin-bottom: 10px;
}

/* reality banner */
.reality-banner {
 text-align: center;
 padding: 46px 24px;
 border: 1px solid var(--accent-dim);
 border-radius: 10px;
 background: radial-gradient(ellipse at center, rgba(57, 230, 200, 0.08), transparent 70%);
}
.reality-banner .eyebrow-mono {
 font-family: 'JetBrains Mono', monospace;
 font-size: 0.75rem;
 letter-spacing: 0.14em;
 color: var(--keep-ref);
 margin-bottom: 14px;
}
.reality-banner h2 {
 font-family: 'Bricolage Grotesque', sans-serif;
 font-weight: 900;
 font-size: clamp(1.7rem, 4.5vw, 2.9rem);
 color: var(--cream);
 text-transform: uppercase;
 max-width: 20ch;
 margin: 0 auto;
}
.reality-banner p.sub {
 max-width: 60ch;
 margin: 18px auto 0;
 color: var(--cream-dim);
 font-size: 1.02rem;
}
.reality-banner .honesty-tag {
 display: inline-block;
 margin-top: 22px;
 font-family: 'JetBrains Mono', monospace;
 font-size: 0.72rem;
 letter-spacing: 0.08em;
 color: var(--keep-ref);
 border: 1px solid var(--keep-ref-dim);
 border-radius: 4px;
 padding: 7px 14px;
}

/* gallery */
.gallery {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 20px;
}
@media (max-width: 980px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .gallery { grid-template-columns: 1fr; } }

.gallery-item {
 background: var(--surface);
 border: 1px solid var(--line);
 border-radius: 8px;
 overflow: hidden;
 cursor: pointer;
 display: flex;
 flex-direction: column;
 padding: 0;
 text-align: left;
 color: inherit;
 font: inherit;
}
.gallery-item:hover { border-color: var(--accent-dim); }
.gallery-item .thumb-wrap {
 position: relative;
 aspect-ratio: 16 / 10;
 overflow: hidden;
 background: var(--bg-elevated);
}
.gallery-item img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: top;
 display: block;
 transition: transform 0.3s ease;
}
.gallery-item:hover img { transform: scale(1.04); }
.gallery-item .gtag {
 position: absolute;
 top: 10px;
 left: 10px;
 font-family: 'JetBrains Mono', monospace;
 font-size: 0.62rem;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 background: rgba(9, 12, 17, 0.85);
 color: var(--keep-ref);
 border: 1px solid var(--keep-ref-dim);
 border-radius: 3px;
 padding: 3px 8px;
}
.gallery-item .gbody { padding: 14px 16px 16px; }
.gallery-item h4 {
 font-family: 'Bricolage Grotesque', sans-serif;
 font-weight: 800;
 font-size: 1.1rem;
 letter-spacing: 0.01em;
 text-transform: uppercase;
 margin-bottom: 6px;
}
.gallery-item p { margin: 0; font-size: 0.86rem; color: var(--cream-dim); line-height: 1.5; }
.gallery-item.discord-in-gallery .thumb-wrap {
 aspect-ratio: 4 / 5;
 background: #1e1f22;
}
.gallery-item.discord-in-gallery img {
 object-fit: contain;
 object-position: center;
}

.gallery-more { text-align: center; margin-top: 28px; }
.full-gallery { margin-top: 28px; }
.full-gallery > summary {
 list-style: none;
 cursor: pointer;
 text-align: center;
 font-family: 'JetBrains Mono', monospace;
 font-size: 0.85rem;
 letter-spacing: 0.05em;
 color: var(--cream);
 border: 1px solid var(--line-bright);
 border-radius: 5px;
 padding: 13px 22px;
 display: inline-block;
}
.full-gallery > summary::-webkit-details-marker { display: none; }
.full-gallery > summary:hover { border-color: var(--accent); color: var(--accent-bright); }
.full-gallery[open] > summary { margin-bottom: 24px; }
.full-gallery-wrap { text-align: center; }

/* lightbox */
.lightbox {
 position: fixed;
 inset: 0;
 z-index: 100;
 background: rgba(10, 11, 7, 0.94);
 display: none;
 align-items: center;
 justify-content: center;
 padding: 40px 20px;
}
.lightbox.open { display: flex; }
.lightbox-inner { max-width: 1100px; width: 100%; }
.lightbox-inner img {
 width: 100%;
 height: auto;
 max-height: 70vh;
 object-fit: contain;
 border: 1px solid var(--line-bright);
 border-radius: 6px;
 background: var(--bg-elevated);
}
.lightbox-caption { margin-top: 16px; text-align: center; }
.lightbox-caption h4 {
 font-family: 'Bricolage Grotesque', sans-serif;
 font-weight: 800;
 font-size: 1.4rem;
 text-transform: uppercase;
 color: var(--cream);
}
.lightbox-caption p { color: var(--cream-dim); margin-top: 6px; max-width: 60ch; margin-left: auto; margin-right: auto; }
.lightbox-nav {
 display: flex;
 justify-content: center;
 gap: 14px;
 margin-top: 20px;
}
.lightbox-btn {
 font-family: 'JetBrains Mono', monospace;
 background: transparent;
 border: 1px solid var(--line-bright);
 color: var(--cream);
 border-radius: 4px;
 padding: 9px 16px;
 cursor: pointer;
 font-size: 0.82rem;
}
.lightbox-btn:hover { border-color: var(--accent); color: var(--accent-bright); }
.lightbox-close {
 position: absolute;
 top: 22px;
 right: 26px;
 font-family: 'JetBrains Mono', monospace;
 background: transparent;
 border: 1px solid var(--line-bright);
 color: var(--cream);
 border-radius: 4px;
 width: 38px;
 height: 38px;
 cursor: pointer;
 font-size: 1rem;
}
.lightbox-close:hover { border-color: var(--accent); color: var(--accent-bright); }

/* keep pulse (under gallery) */
.keep-pulse {
 margin-top: 42px;
 text-align: center;
 padding: 28px 16px 4px;
 border-top: 1px solid var(--line);
}
.keep-pulse-line {
 font-family: 'Bricolage Grotesque', sans-serif;
 font-weight: 900;
 font-size: clamp(1.35rem, 3.5vw, 1.9rem);
 letter-spacing: 0.04em;
 text-transform: uppercase;
 color: var(--cream);
 margin: 0 0 10px;
}
.keep-pulse-sub {
 margin: 0;
 color: var(--cream-dim);
 font-size: 1.02rem;
 max-width: 42ch;
 margin-left: auto;
 margin-right: auto;
}

/* discord feed / keep in the loop */
.eyebrow-mono {
 font-family: 'JetBrains Mono', monospace;
 font-size: 0.75rem;
 letter-spacing: 0.14em;
 text-transform: uppercase;
 color: var(--keep-ref);
 margin: 0 0 14px;
}
.section-sub {
 font-size: 1.12rem;
 color: var(--cream-dim);
 margin: -6px 0 22px;
 max-width: 48ch;
}
.honesty-tag {
 display: inline-block;
 font-family: 'JetBrains Mono', monospace;
 font-size: 0.72rem;
 letter-spacing: 0.08em;
 color: var(--keep-ref);
 border: 1px solid var(--keep-ref-dim);
 border-radius: 4px;
 padding: 7px 14px;
}
.loop-honesty { margin: 4px 0 28px; }
.loop-label { margin-bottom: 18px; }

.discord-feed {
 display: grid;
 grid-template-columns: repeat(6, 1fr);
 gap: 20px;
 align-items: start;
}
.discord-card {
 grid-column: span 2;
 background: var(--surface);
 border: 1px solid var(--line);
 border-radius: 8px;
 overflow: hidden;
 cursor: pointer;
 display: flex;
 flex-direction: column;
 padding: 0;
 text-align: left;
 color: inherit;
 font: inherit;
 width: 100%;
 min-width: 0;
}
.discord-card:nth-child(4),
.discord-card:nth-child(5) {
 grid-column: span 3;
}
.discord-card:hover { border-color: var(--accent-dim); }
.discord-card .thumb-wrap {
 position: relative;
 background: #1e1f22;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 18px 16px;
 min-height: 280px;
 overflow: hidden;
}
.discord-card img {
 display: block;
 width: 100%;
 max-width: 440px;
 height: auto;
 object-fit: contain;
 image-rendering: -webkit-optimize-contrast;
}
.discord-card:hover img { transform: none; }
.discord-card .gtag {
 position: absolute;
 top: 10px;
 left: 10px;
 font-family: 'JetBrains Mono', monospace;
 font-size: 0.62rem;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 background: rgba(9, 12, 17, 0.85);
 color: var(--keep-ref);
 border: 1px solid var(--keep-ref-dim);
 border-radius: 3px;
 padding: 3px 8px;
}
.discord-card .gbody { padding: 14px 16px 16px; }
.discord-card h4 {
 font-family: 'Bricolage Grotesque', sans-serif;
 font-weight: 800;
 font-size: 1.05rem;
 letter-spacing: 0.02em;
 text-transform: uppercase;
 margin-bottom: 6px;
}
.discord-card p { margin: 0; font-size: 0.86rem; color: var(--cream-dim); line-height: 1.5; }

@media (max-width: 980px) {
 .discord-feed { grid-template-columns: 1fr 1fr; }
 .discord-card,
 .discord-card:nth-child(4),
 .discord-card:nth-child(5) { grid-column: span 1; }
}
@media (max-width: 640px) {
 .discord-feed { grid-template-columns: 1fr; }
 .discord-card .thumb-wrap { min-height: 0; padding: 14px 12px; }
}

/* tour */
.tour-steps {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 margin-bottom: 22px;
}
.tour-step {
 font-family: 'JetBrains Mono', monospace;
 font-size: 0.78rem;
 letter-spacing: 0.03em;
 background: var(--surface);
 border: 1px solid var(--line);
 color: var(--cream-dim);
 border-radius: 5px;
 padding: 10px 14px;
 cursor: pointer;
 white-space: nowrap;
}
.tour-step:hover { border-color: var(--line-bright); color: var(--cream); }
.tour-step.active { border-color: var(--accent); color: var(--accent-bright); background: rgba(57, 230, 200, 0.08); }
.tour-stage {
 display: grid;
 grid-template-columns: 1.4fr 1fr;
 gap: 24px;
 align-items: stretch;
}
@media (max-width: 800px) { .tour-stage { grid-template-columns: 1fr; } }
.tour-stage .tour-image {
 border: 1px solid var(--line);
 border-radius: 8px;
 overflow: hidden;
 background: var(--bg-elevated);
 aspect-ratio: 16/10;
}
.tour-stage .tour-image img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.tour-copy {
 background: var(--surface);
 border: 1px solid var(--line);
 border-radius: 8px;
 padding: 24px;
 display: flex;
 flex-direction: column;
 justify-content: center;
}
.tour-copy .step-num {
 font-family: 'JetBrains Mono', monospace;
 font-size: 0.72rem;
 letter-spacing: 0.1em;
 color: var(--accent-bright);
 margin-bottom: 10px;
}
.tour-copy h4 {
 font-family: 'Bricolage Grotesque', sans-serif;
 font-weight: 800;
 font-size: 1.6rem;
 text-transform: uppercase;
}
.tour-copy p { color: var(--cream-dim); margin-top: 12px; font-size: 0.95rem; }

/* hear the keep (codec voice archive) */
.codec-unit {
 border: 1px solid var(--line-bright);
 border-radius: 10px;
 background: var(--bg-elevated);
 overflow: hidden;
}
.codec-unit-head {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 12px 18px;
 border-bottom: 1px solid var(--line);
 font-family: 'JetBrains Mono', monospace;
 font-size: 0.7rem;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 color: var(--cream-faint);
}
.codec-unit-head .status-live {
 color: var(--signal);
}
.codec-unit-head .status-live::before {
 content: '●';
 margin-right: 6px;
 animation: blink 1.4s steps(1) infinite;
}

.codec-screen {
 position: relative;
 aspect-ratio: 16 / 8;
 background: #05060a;
 overflow: hidden;
}
.codec-screen .frame {
 position: absolute;
 inset: 0;
 opacity: 0;
 transition: opacity 1.1s ease;
}
.codec-screen .frame.active { opacity: 1; }
.codec-screen .frame img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: top;
 filter: saturate(0.55) brightness(0.42);
}
.codec-screen .scanlines {
 position: absolute;
 inset: 0;
 background: repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0px, rgba(0,0,0,0.18) 1px, transparent 1px, transparent 3px);
 pointer-events: none;
}
.codec-screen .screen-overlay {
 position: absolute;
 inset: 0;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 text-align: center;
 padding: 20px;
}
.codec-screen .transmit-label {
 font-family: 'JetBrains Mono', monospace;
 font-size: 0.78rem;
 letter-spacing: 0.1em;
 color: var(--signal);
 margin-bottom: 10px;
 min-height: 1.2em;
}
.codec-screen .transmit-label.idle { color: var(--cream-faint); }
.codec-screen .speaker-name {
 font-family: 'Bricolage Grotesque', sans-serif;
 font-weight: 900;
 font-size: clamp(1.8rem, 5vw, 3rem);
 color: var(--cream);
 text-transform: uppercase;
 text-shadow: 0 0 24px rgba(0,0,0,0.7);
}
.codec-screen .speaker-role {
 font-family: 'JetBrains Mono', monospace;
 font-size: 0.78rem;
 letter-spacing: 0.12em;
 color: var(--accent-bright);
 margin-top: 6px;
}

.codec-agents {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 1px;
 background: var(--line);
}
@media (max-width: 700px) { .codec-agents { grid-template-columns: repeat(2, 1fr); } }
.codec-agent {
 background: var(--bg-elevated);
 padding: 16px 10px;
 text-align: center;
 opacity: 0.4;
 transition: opacity 0.5s ease, background 0.5s ease;
}
.codec-agent.active {
 opacity: 1;
 background: var(--surface-2);
}
.codec-agent img {
 width: 64px;
 height: 64px;
 border-radius: 50%;
 object-fit: cover;
 border: 2px solid var(--line-bright);
 margin: 0 auto 10px;
 display: block;
 transition: border-color 0.5s ease, box-shadow 0.5s ease;
}
.codec-agent.active img {
 border-color: var(--accent);
 box-shadow: 0 0 0 4px rgba(57, 230, 200, 0.15);
}
.codec-agent .a-name {
 font-family: 'Bricolage Grotesque', sans-serif;
 font-weight: 800;
 font-size: 0.92rem;
 letter-spacing: 0.02em;
 text-transform: uppercase;
 color: var(--cream);
}
.codec-agent .a-role {
 font-family: 'JetBrains Mono', monospace;
 font-size: 0.6rem;
 letter-spacing: 0.05em;
 color: var(--cream-faint);
 margin-top: 4px;
}

.codec-controls {
 padding: 20px 22px 22px;
 border-top: 1px solid var(--line);
}
.codec-play-row {
 display: flex;
 align-items: center;
 gap: 14px;
 flex-wrap: wrap;
}
.codec-play-btn {
 font-family: 'JetBrains Mono', monospace;
 font-size: 0.9rem;
 font-weight: 600;
 letter-spacing: 0.04em;
 background: var(--accent);
 color: #04130f;
 border: none;
 border-radius: 5px;
 padding: 14px 24px;
 cursor: pointer;
 flex-shrink: 0;
}
.codec-play-btn:hover { background: var(--accent-bright); }
.codec-restart-btn {
 font-family: 'JetBrains Mono', monospace;
 font-size: 0.78rem;
 background: transparent;
 border: 1px solid var(--line-bright);
 color: var(--cream-dim);
 border-radius: 5px;
 padding: 10px 14px;
 cursor: pointer;
 flex-shrink: 0;
}
.codec-restart-btn:hover { border-color: var(--accent); color: var(--accent-bright); }
.codec-progress-wrap {
 flex: 1;
 min-width: 160px;
 display: flex;
 align-items: center;
 gap: 10px;
}
.codec-progress-track {
 flex: 1;
 height: 6px;
 background: var(--surface-2);
 border-radius: 3px;
 overflow: hidden;
 cursor: pointer;
}
.codec-progress-fill {
 height: 100%;
 width: 0%;
 background: linear-gradient(90deg, var(--accent-dim), var(--accent-bright));
}
.codec-time {
 font-family: 'JetBrains Mono', monospace;
 font-size: 0.72rem;
 color: var(--cream-faint);
 font-variant-numeric: tabular-nums;
 white-space: nowrap;
}
.codec-foot {
 margin-top: 18px;
 font-size: 0.88rem;
 color: var(--cream-dim);
}
.codec-foot .voice-tag {
 display: block;
 margin-top: 8px;
 font-family: 'JetBrains Mono', monospace;
 font-size: 0.7rem;
 letter-spacing: 0.1em;
 color: var(--keep-ref);
}

/* footer */
footer {
 border-top: 1px solid var(--line);
 padding: 34px 0 48px;
}
footer .wrap {
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
 gap: 14px;
 font-family: 'JetBrains Mono', monospace;
 font-size: 0.78rem;
 color: var(--cream-faint);
}
footer a { color: var(--cream-dim); }
footer a:hover { color: var(--accent-bright); }

/* Otacon Expansion (premium tier) */
:root {
 --premium: #a888e0;
 --premium-bright: #c4a8f5;
 --premium-dim: #5a4a80;
}
.stamp.premium {
 border-color: var(--premium);
 color: var(--premium-bright);
 background: linear-gradient(180deg, rgba(168, 136, 224, 0.14), rgba(168, 136, 224, 0.02));
 box-shadow: 0 0 18px rgba(168, 136, 224, 0.28), inset 0 0 12px rgba(168, 136, 224, 0.08);
}
.badge.premium { color: var(--premium-bright); border: 1px solid var(--premium-dim); }
.legend .dot.premium { background: var(--premium); }
.tag.premium { color: var(--premium-bright); }

.agentgrid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
 gap: 16px;
 margin-top: 20px;
}
.agentcard {
 background: var(--surface);
 border: 1px solid var(--line);
 border-radius: 8px;
 overflow: hidden;
 border-top: 3px solid var(--agent-accent, var(--premium));
}
.agentcard img {
 width: 100%;
 aspect-ratio: 4 / 3;
 object-fit: cover;
 display: block;
 filter: saturate(0.92);
}
.agentcard .agentbody { padding: 14px 16px 16px; }
.agentcard h4 {
 font-family: 'Bricolage Grotesque', sans-serif;
 font-weight: 800;
 font-size: 1.15rem;
 margin: 0 0 2px;
 color: var(--agent-accent, var(--premium-bright));
}
.agentcard .agentrole {
 font-family: 'JetBrains Mono', monospace;
 font-size: 0.68rem;
 letter-spacing: 0.04em;
 color: var(--cream-faint);
 text-transform: uppercase;
 margin-bottom: 8px;
}
.agentcard p { font-size: 0.86rem; color: var(--cream-dim); margin: 0; }
.agentcard .agentroom {
 margin-top: 10px;
 font-family: 'JetBrains Mono', monospace;
 font-size: 0.72rem;
 color: var(--cream-faint);
 border-top: 1px solid var(--line);
 padding-top: 8px;
}
.agentcard .agentroom strong { color: var(--cream-dim); }

.disclaimer-panel {
 background: var(--surface);
 border: 1px solid var(--line-bright);
 border-radius: 8px;
 padding: 22px 24px;
 margin-top: 22px;
}
.disclaimer-panel h4 {
 font-family: 'JetBrains Mono', monospace;
 font-size: 0.78rem;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 margin: 0 0 10px;
}
.disclaimer-panel h4.verified { color: var(--signal); }
.disclaimer-panel h4.pending { color: var(--warn); }
.disclaimer-panel ul { margin: 8px 0 0; padding-left: 18px; }
.disclaimer-panel li { font-size: 0.9rem; color: var(--cream-dim); margin-bottom: 6px; }
.disclaimer-panel + .disclaimer-panel { margin-top: 12px; }
.progression .step.premium { border-color: var(--premium-dim); color: var(--premium-bright); }

.motiongrid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr));
 gap: 12px;
 margin-top: 20px;
}
.motioncard {
 background: var(--surface);
 border: 1px solid var(--line);
 border-radius: 4px;
 overflow: hidden;
}
.motioncard video { width: 100%; aspect-ratio: 9/16; object-fit: cover; display: block; background: #000; }
.motioncard .mc-label {
 padding: 8px 10px;
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 6px;
 border-top: 1px solid var(--line);
}
.motioncard .mc-name { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 0.8rem; }
.motioncard .mc-key { font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; color: var(--cream-faint); }

.quickpick-wrap { padding: 26px 0 8px; }
.quickpick-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 800px) { .quickpick-grid { grid-template-columns: 1fr; } }
@media (min-width: 1100px) { .quickpick-grid { grid-template-columns: repeat(4, 1fr); } }
.quickpick {
 background: var(--surface);
 border: 1px solid var(--line);
 border-top: 3px solid var(--qp-accent, var(--accent));
 border-radius: 4px;
 padding: 18px 20px;
 display: flex;
 flex-direction: column;
 gap: 8px;
 position: relative;
 overflow: visible;
}
.quickpick .qp-eyebrow {
 font-family: 'JetBrains Mono', monospace;
 font-size: 0.65rem;
 letter-spacing: 0.1em;
 text-transform: uppercase;
 color: var(--qp-accent, var(--accent-bright));
}
.quickpick h3 { font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.2rem; text-transform: uppercase; }
.quickpick p { font-size: 0.86rem; color: var(--cream-dim); margin: 0; }
.quickpick p.qp-support { flex-grow: 0; }
.quickpick .btn { margin-top: 6px; justify-content: center; width: 100%; }

/* FREE corner sticker */
.is-free {
 --free-sticker-pad: 1.1rem;
}
.free-sticker {
 position: absolute;
 top: 14px;
 right: -10px;
 z-index: 3;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 5.4rem;
 padding: 0.55rem 1.35rem;
 transform: rotate(14deg);
 transform-origin: center center;
 background: linear-gradient(135deg, #2fe08a 0%, #18b86a 55%, #0e8f52 100%);
 color: #04140e;
 border: 2px solid #e8fff2;
 border-radius: 3px;
 box-shadow:
 0 8px 18px rgba(0, 0, 0, 0.45),
 0 0 0 1px rgba(4, 20, 14, 0.35),
 inset 0 1px 0 rgba(255, 255, 255, 0.35);
 font-family: 'Bricolage Grotesque', sans-serif;
 font-weight: 900;
 font-size: clamp(1.05rem, 2.4vw, 1.35rem);
 letter-spacing: 0.14em;
 line-height: 1;
 text-transform: uppercase;
 pointer-events: none;
 user-select: none;
}
.free-sticker::before {
 content: "";
 position: absolute;
 inset: 3px;
 border: 1px dashed rgba(4, 20, 14, 0.28);
 border-radius: 2px;
 pointer-events: none;
}
.donation-sticker {
 position: absolute;
 top: 14px;
 right: -10px;
 z-index: 3;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 4.6rem;
 padding: 0.55rem 1.1rem;
 transform: rotate(-12deg);
 transform-origin: center center;
 background: linear-gradient(135deg, #c4a8f5 0%, #a888e0 50%, #7a5cb8 100%);
 color: #150f24;
 border: 2px solid #f3eaff;
 border-radius: 3px;
 box-shadow:
 0 8px 18px rgba(0, 0, 0, 0.45),
 0 0 0 1px rgba(21, 15, 36, 0.35),
 inset 0 1px 0 rgba(255, 255, 255, 0.35);
 font-family: 'Bricolage Grotesque', sans-serif;
 font-weight: 900;
 font-size: clamp(1.15rem, 2.6vw, 1.5rem);
 letter-spacing: 0.06em;
 line-height: 1;
 pointer-events: none;
 user-select: none;
}
.donation-sticker::before {
 content: "";
 position: absolute;
 inset: 3px;
 border: 1px dashed rgba(21, 15, 36, 0.28);
 border-radius: 2px;
 pointer-events: none;
}
.project-card .free-sticker,
.install-panel .free-sticker,
.project-card .donation-sticker,
.install-panel .donation-sticker {
 top: 18px;
 right: -8px;
 min-width: 5.4rem;
 font-size: clamp(1.15rem, 2.2vw, 1.45rem);
 padding: 0.62rem 1.35rem;
}
.quickpick.is-free,
.quickpick.is-donation {
 padding-top: 22px;
 padding-right: 34px;
}
.project-card.is-free,
.install-panel.is-free,
.project-card.is-donation,
.install-panel.is-donation {
 padding-top: 30px;
 padding-right: 36px;
}
.qp-cost {
 margin: 0 !important;
 font-family: 'Bricolage Grotesque', sans-serif;
 font-weight: 800;
 font-size: 0.92rem;
 line-height: 1.35;
 letter-spacing: 0.01em;
}
.qp-cost.free {
 color: #43d98a;
}
.qp-cost.paid {
 color: var(--premium-bright, #c4a8f5);
}
.project-card .qp-cost,
.install-panel .qp-cost {
 font-size: 1.02rem;
}
@media (max-width: 600px) {
 .free-sticker,
 .donation-sticker {
  top: 10px;
  right: -6px;
  min-width: 4.2rem;
  font-size: 0.95rem;
  padding: 0.45rem 0.9rem;
 }
 .free-sticker { transform: rotate(12deg); }
 .donation-sticker { transform: rotate(-10deg); }
}

button.btn {
 font: inherit;
 cursor: pointer;
 appearance: none;
 -webkit-appearance: none;
}

/* premium access gate */
.gate-panel {
 max-width: 460px;
 margin: 48px auto;
 background: var(--surface);
 border: 1px solid var(--premium-dim);
 border-radius: 4px;
 padding: 32px 30px;
 text-align: center;
 box-shadow: 0 0 24px rgba(168, 136, 224, 0.12);
}
.gate-panel .gate-icon {
 font-family: 'JetBrains Mono', monospace;
 font-size: 0.7rem;
 letter-spacing: 0.16em;
 text-transform: uppercase;
 color: var(--premium-bright);
 margin-bottom: 10px;
}
.gate-panel h1 {
 font-family: 'Bricolage Grotesque', sans-serif;
 font-weight: 800;
 text-transform: uppercase;
 font-size: 1.7rem;
 margin-bottom: 14px;
}
.gate-panel p { color: var(--cream-dim); font-size: 0.92rem; margin: 0 0 20px; }
.gate-form { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.gate-form input {
 flex: 1 1 130px;
 background: var(--bg-elevated);
 border: 1px solid var(--line-bright);
 border-radius: 4px;
 color: var(--cream);
 font-family: 'JetBrains Mono', monospace;
 padding: 11px 14px;
 font-size: 0.95rem;
 letter-spacing: 0.06em;
 text-align: center;
}
.gate-form input:focus { outline: 2px solid var(--premium); outline-offset: 2px; }
.gate-form button {
 background: var(--premium);
 color: #150f24;
 border: 1px solid var(--premium);
 border-radius: 4px;
 padding: 11px 20px;
 font-family: 'JetBrains Mono', monospace;
 font-weight: 700;
 cursor: pointer;
}
.gate-form button:hover { background: var(--premium-bright); border-color: var(--premium-bright); }
.gate-error { color: var(--danger); font-size: 0.84rem; margin-top: 12px; min-height: 1.2em; }
.gate-hint { margin-top: 18px; font-size: 0.8rem; color: var(--cream-faint); }
.donate-btn { border-color: var(--warn-dim); color: var(--warn); }
.donate-btn:hover { border-color: var(--warn); color: var(--warn); background: rgba(224, 168, 60, 0.1); }

.access-panel {
 max-width: 620px;
 margin: 48px auto 28px;
 background: var(--surface);
 border: 1px solid var(--warn-dim);
 border-radius: 4px;
 padding: 34px 30px;
 text-align: center;
 box-shadow: 0 0 24px rgba(224, 168, 60, 0.14);
}
.access-panel .gate-icon {
 font-family: 'JetBrains Mono', monospace;
 font-size: 0.7rem;
 letter-spacing: 0.16em;
 text-transform: uppercase;
 color: var(--warn);
 margin-bottom: 10px;
}
.access-panel h1 {
 font-family: 'Bricolage Grotesque', sans-serif;
 font-weight: 800;
 text-transform: uppercase;
 font-size: 1.5rem;
 margin-bottom: 12px;
}
.tier-grid {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 10px;
 margin-top: 8px;
}
@media (max-width: 620px) { .tier-grid { grid-template-columns: 1fr 1fr; } }
.tier-card {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 4px;
 background: var(--bg-elevated);
 border: 1px solid var(--warn-dim);
 border-radius: 4px;
 padding: 16px 10px;
 text-decoration: none;
 transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.tier-card:hover { border-color: var(--warn); box-shadow: 0 0 14px rgba(224, 168, 60, 0.3); }
.tier-card .tier-amount {
 font-family: 'Bricolage Grotesque', sans-serif;
 font-weight: 800;
 font-size: 1.4rem;
 color: var(--warn);
}
.tier-card .tier-label {
 font-family: 'JetBrains Mono', monospace;
 font-size: 0.62rem;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 color: var(--cream-faint);
 text-align: center;
}
.tier-card-monthly { border-color: var(--premium-dim); }
.tier-card-monthly:hover { border-color: var(--premium); box-shadow: 0 0 14px rgba(168, 136, 224, 0.3); }
.tier-card-monthly .tier-amount { color: var(--premium-bright); }
.bmc-widget-wrap { display: flex; justify-content: center; margin-top: 18px; min-height: 54px; }

/* premium member HQ */
.nav-signout {
 background: transparent;
 border: 1px solid var(--line-bright);
 color: var(--cream-dim);
 font-family: 'JetBrains Mono', monospace;
 font-size: 0.72rem;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 padding: 6px 10px;
 border-radius: 4px;
 cursor: pointer;
}
.nav-signout:hover { border-color: var(--premium); color: var(--premium-bright); }

.member-hq { padding-bottom: 64px; }
.member-hero { margin: 36px 0 28px; }
.member-hero-top {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
 margin-bottom: 10px;
}
.member-thanks {
 margin: 0;
 font-family: 'JetBrains Mono', monospace;
 font-size: 0.78rem;
 letter-spacing: 0.12em;
 text-transform: uppercase;
 color: var(--premium-bright);
}
.member-title {
 font-size: clamp(2.1rem, 5.5vw, 3.4rem);
 margin: 8px 0 12px;
}
.member-lede { max-width: 62ch; }

.license-card {
 margin-top: 22px;
 background:
 linear-gradient(135deg, rgba(168, 136, 224, 0.12), transparent 42%),
 var(--surface);
 border: 1px solid var(--premium-dim);
 border-radius: 4px;
 padding: 22px 22px 16px;
 box-shadow: 0 0 28px rgba(168, 136, 224, 0.12);
}
.license-card-h {
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 12px;
 margin-bottom: 16px;
}
.license-kicker {
 font-family: 'JetBrains Mono', monospace;
 font-size: 0.7rem;
 letter-spacing: 0.16em;
 text-transform: uppercase;
 color: var(--cream-faint);
}
.license-status {
 font-family: 'JetBrains Mono', monospace;
 font-size: 0.72rem;
 letter-spacing: 0.1em;
 padding: 4px 10px;
 border-radius: 4px;
 border: 1px solid var(--signal-dim);
 color: var(--signal);
 background: rgba(67, 217, 138, 0.08);
}
.license-status[data-status="revoked"],
.license-status[data-status="suspended"] {
 border-color: var(--danger);
 color: var(--danger);
 background: rgba(239, 95, 107, 0.08);
}
.license-grid {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 14px 18px;
 margin: 0;
}
@media (max-width: 720px) { .license-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .license-grid { grid-template-columns: 1fr; } }
.license-grid dt {
 font-family: 'JetBrains Mono', monospace;
 font-size: 0.62rem;
 letter-spacing: 0.1em;
 text-transform: uppercase;
 color: var(--cream-faint);
 margin: 0 0 4px;
}
.license-grid dd {
 margin: 0;
 font-size: 0.95rem;
 color: var(--cream);
 word-break: break-word;
}
.license-foot {
 margin: 16px 0 0;
 font-size: 0.8rem;
 color: var(--cream-faint);
}

.member-panel {
 background: var(--surface);
 border: 1px solid var(--line);
 border-radius: 4px;
 padding: 22px 24px;
}
.member-panel h2 {
 font-family: 'Bricolage Grotesque', sans-serif;
 text-transform: uppercase;
 font-size: 1.35rem;
 margin: 0 0 12px;
 color: var(--premium-bright);
}
.member-panel.appreciate {
 border-color: var(--premium-dim);
 background:
 radial-gradient(ellipse at top right, rgba(168, 136, 224, 0.14), transparent 55%),
 var(--surface);
}
.member-panel.writeup p,
.member-panel.appreciate p { color: var(--cream-dim); margin: 0 0 12px; }
.member-panel.writeup p:last-child,
.member-panel.appreciate p:last-child { margin-bottom: 0; }

.news-feed { display: grid; gap: 12px; }
.news-item {
 background: var(--surface);
 border: 1px solid var(--line);
 border-left: 3px solid var(--premium);
 border-radius: 4px;
 padding: 16px 18px;
}
.news-meta {
 display: flex;
 gap: 10px;
 align-items: center;
 margin-bottom: 6px;
}
.news-meta time {
 font-family: 'JetBrains Mono', monospace;
 font-size: 0.72rem;
 color: var(--cream-faint);
}
.news-tag {
 font-family: 'JetBrains Mono', monospace;
 font-size: 0.68rem;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 color: var(--premium-bright);
 border: 1px solid var(--premium-dim);
 padding: 2px 8px;
 border-radius: 4px;
}
.news-item h3 {
 font-family: 'Bricolage Grotesque', sans-serif;
 text-transform: uppercase;
 font-size: 1.05rem;
 margin: 0 0 6px;
}
.news-item p { margin: 0; color: var(--cream-dim); font-size: 0.92rem; }

.protocol-list {
 margin: 0;
 padding-left: 1.2em;
 color: var(--cream-dim);
}
.protocol-list li { margin-bottom: 10px; }
.protocol-list li:last-child { margin-bottom: 0; }

.ops-desk { padding-bottom: 64px; }
.ops-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 4px; }
.ops-table {
 width: 100%;
 border-collapse: collapse;
 font-size: 0.84rem;
}
.ops-table th, .ops-table td {
 text-align: left;
 padding: 10px 12px;
 border-bottom: 1px solid var(--line);
 vertical-align: top;
}
.ops-table th {
 font-family: 'JetBrains Mono', monospace;
 font-size: 0.68rem;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 color: var(--cream-faint);
 background: var(--surface);
}
.ops-table tr[data-status="revoked"] td,
.ops-table tr[data-status="suspended"] td { color: var(--danger); }
.ops-result {
 background: var(--bg-elevated);
 border: 1px solid var(--line);
 border-radius: 4px;
 padding: 14px 16px;
 overflow-x: auto;
 white-space: pre-wrap;
 word-break: break-word;
 color: var(--cream-dim);
 font-size: 0.8rem;
 margin: 0;
}

/* About the Creator */
.about-article {
 max-width: 720px;
 padding-bottom: 72px;
}

.about-section {
 padding: 28px 0;
 border-top: 1px solid var(--line);
}

.about-section:first-of-type {
 border-top: none;
 padding-top: 0;
}

.about-section h2 {
 font-family: 'Bricolage Grotesque', sans-serif;
 text-transform: uppercase;
 letter-spacing: 0.03em;
 font-size: clamp(1.35rem, 3vw, 1.75rem);
 margin: 0 0 16px;
 color: var(--cream);
}

.about-section p {
 color: var(--cream-dim);
 font-size: 1.02rem;
 line-height: 1.75;
 margin: 0 0 1rem;
}

.about-section p:last-child {
 margin-bottom: 0;
}

.about-tech-list,
.about-product-list {
 margin: 0 0 1.1rem;
 padding-left: 1.2rem;
 color: var(--cream-dim);
}

.about-tech-list li,
.about-product-list li {
 margin: 0.35rem 0;
 line-height: 1.55;
}

.about-quote {
 margin: 1.1rem 0;
 padding: 12px 16px;
 border-left: 3px solid var(--accent);
 background: rgba(57, 230, 200, 0.05);
 color: var(--cream);
 font-size: 1.02rem;
 line-height: 1.55;
}

.about-welcome {
 margin-top: 1.4rem !important;
 font-size: 1.2rem !important;
 color: var(--cream) !important;
}

.about-cta {
 margin-top: 1.2rem !important;
}

.about-attribution {
 margin-top: 12px;
}

.about-attribution p {
 font-size: 0.9rem;
 color: var(--cream-faint);
}

/* Home proof strip + claims */
.proof-strip {
 position: sticky;
 top: 0;
 z-index: 40;
 background: rgba(8, 12, 18, 0.92);
 border-bottom: 1px solid var(--line);
 backdrop-filter: blur(8px);
}

.proof-strip-inner {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 8px 14px;
 padding: 8px 0;
 font: 500 0.75rem JetBrains Mono, monospace;
}

.proof-kicker {
 color: var(--accent-bright);
 letter-spacing: 0.08em;
 text-transform: uppercase;
}

.proof-chip {
 color: var(--cream-dim);
 border: 1px solid var(--line);
 padding: 3px 8px;
 border-radius: 2px;
}

.proof-link {
 margin-left: auto;
 color: var(--accent-bright);
 text-decoration: none;
}

.proof-link:hover { text-decoration: underline; }

.claims-box {
 margin-top: 22px;
 padding: 14px 16px;
 border: 1px solid var(--line);
 border-left: 3px solid var(--accent);
 background: rgba(57, 230, 200, 0.04);
 max-width: 640px;
}

.claims-title {
 margin: 0 0 6px;
 font: 700 0.72rem JetBrains Mono, monospace;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 color: var(--accent-bright);
}

.claims-body {
 margin: 0 0 8px;
 color: var(--cream-dim);
 font-size: 0.92rem;
 line-height: 1.55;
}

.claims-links {
 margin: 0;
 font-size: 0.85rem;
}

.claims-links a { color: var(--accent-bright); }

/* About TOC + eng chips */
.about-layout {
 display: grid;
 grid-template-columns: 200px minmax(0, 720px);
 gap: 32px;
 align-items: start;
 max-width: 980px;
 margin: 0 auto;
 padding: 0 20px 72px;
}

.about-toc {
 position: sticky;
 top: 72px;
 font-size: 0.78rem;
 line-height: 1.35;
}

.about-toc strong {
 display: block;
 font: 700 0.7rem JetBrains Mono, monospace;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 color: var(--accent-bright);
 margin-bottom: 10px;
}

.about-toc a {
 display: block;
 color: var(--cream-faint);
 text-decoration: none;
 padding: 4px 0;
 border-left: 2px solid transparent;
 padding-left: 8px;
}

.about-toc a:hover,
.about-toc a:focus {
 color: var(--cream);
 border-left-color: var(--accent);
}

.about-article { max-width: none; padding-bottom: 0; }

.about-eng-chip {
 display: inline-flex;
 flex-wrap: wrap;
 gap: 6px;
 margin-top: 14px;
}

.about-eng-chip a {
 font: 600 0.72rem JetBrains Mono, monospace;
 color: #0a1014;
 background: var(--accent);
 text-decoration: none;
 padding: 4px 9px;
 border-radius: 2px;
}

.about-eng-chip a:hover { filter: brightness(1.08); }

.about-pull {
 margin: 18px 0;
 padding: 14px 18px;
 border-left: 3px solid var(--accent-bright);
 color: var(--cream);
 font-size: 1.15rem;
 line-height: 1.45;
 font-family: 'Bricolage Grotesque', sans-serif;
}

.about-figure {
 margin: 20px 0;
 border: 1px solid var(--line);
 background: #0a0e14;
 padding: 16px;
 border-radius: 4px;
}

.about-figure figcaption {
 margin-top: 8px;
 font-size: 0.78rem;
 color: var(--cream-faint);
 font-family: JetBrains Mono, monospace;
}

.about-metrics {
 margin: 12px 0 0;
 padding-left: 1.2rem;
 color: var(--cream-dim);
}

.about-metrics li { margin: 0.4rem 0; line-height: 1.5; }
.about-metrics a { color: var(--accent-bright); }

/* Match about-layout frame (980px + 20px side padding) */
.about-hero {
 max-width: 980px;
 margin-left: auto;
 margin-right: auto;
 padding-left: 20px;
 padding-right: 20px;
 padding-bottom: 8px;
}

.about-hero-inner {
 display: grid;
 grid-template-columns: 88px minmax(0, 1fr);
 gap: 18px;
 align-items: start;
 max-width: 720px;
 margin-left: 220px; /* align with about-article column (200px TOC + 32px gap) */
}

.about-portrait {
 margin: 0;
 width: 88px;
}

.about-portrait img {
 display: block;
 width: 88px;
 height: 88px;
 object-fit: cover;
 border-radius: 4px;
 border: 1px solid var(--line-bright);
}

.about-hero-copy .display {
 font-size: clamp(1.85rem, 4vw, 2.6rem);
 margin: 0 0 0.35rem;
}

.about-hero-copy .lede {
 margin: 0 0 0.45rem;
 font-size: 1rem;
 max-width: 36rem;
}

.about-hero-meta {
 margin: 0;
 font: 500 0.78rem JetBrains Mono, monospace;
}

.about-hero-meta a {
 color: var(--accent-bright);
 text-decoration: none;
}

.about-hero-meta a:hover {
 text-decoration: underline;
}

@media (max-width: 860px) {
 .about-layout { grid-template-columns: 1fr; }
 .about-toc {
 position: static;
 display: flex;
 flex-wrap: wrap;
 gap: 4px 12px;
 border-bottom: 1px solid var(--line);
 padding-bottom: 12px;
 margin-bottom: 8px;
 }
 .about-toc strong { width: 100%; }
 .about-toc a { border-left: none; padding-left: 0; }
 .about-hero-inner {
 margin-left: 0;
 grid-template-columns: 72px minmax(0, 1fr);
 gap: 14px;
 }
 .about-portrait,
 .about-portrait img {
 width: 72px;
 height: 72px;
 }
}

/* dual install · left one-click / right manual steps */
.os-card-manual {
 border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}
.os-card-manual > .os-label {
 color: var(--cream);
}
.manual-col-tag {
 display: inline-block;
 font: 700 0.65rem JetBrains Mono, monospace;
 letter-spacing: 0.07em;
 text-transform: uppercase;
 color: var(--accent-bright);
 border: 1px solid var(--accent);
 border-radius: 4px;
 padding: 2px 7px;
 margin: 0 0 8px;
 width: fit-content;
}
.manual-steps {
 display: flex;
 flex-direction: column;
 gap: 8px;
 margin-top: 4px;
}
.manual-step {
 border: 1px solid var(--line);
 border-radius: 6px;
 background: var(--bg-elevated);
 overflow: hidden;
}
.manual-step[open] {
 border-color: var(--accent);
}
.manual-step > summary {
 list-style: none;
 cursor: pointer;
 display: flex;
 align-items: center;
 gap: 10px;
 padding: 11px 12px;
 color: var(--cream);
 font-weight: 700;
 font-size: 0.92rem;
 user-select: none;
}
.manual-step > summary::-webkit-details-marker { display: none; }
.manual-step > summary::after {
 content: "▸";
 margin-left: auto;
 color: var(--accent-bright);
 font-size: 0.85rem;
}
.manual-step[open] > summary::after { content: "▾"; }
.manual-step-num {
 flex-shrink: 0;
 width: 1.55rem;
 height: 1.55rem;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 border-radius: 999px;
 font: 700 0.75rem JetBrains Mono, monospace;
 color: var(--bg);
 background: var(--accent-bright);
}
.manual-step-body {
 padding: 0 12px 12px;
 border-top: 1px solid var(--line);
 color: var(--cream-dim);
 font-size: 0.88rem;
 line-height: 1.45;
}
.manual-step-body > p { margin: 10px 0 0; }
.manual-step-body > ol,
.manual-step-body > ul {
 margin: 10px 0 0;
 padding-left: 1.15rem;
}
.manual-step-body li { margin: 0 0 6px; }
.manual-step-body .codebox {
 margin-top: 8px;
}
.manual-step-body .codebox code {
 font-size: 0.72rem;
}
.manual-next {
 display: inline-flex;
 align-items: center;
 margin-top: 12px;
 padding: 8px 12px;
 border: 1px solid var(--accent);
 border-radius: 5px;
 background: transparent;
 color: var(--accent-bright);
 font: 700 0.82rem Figtree, sans-serif;
 cursor: pointer;
}
.manual-next:hover {
 background: rgba(232, 140, 48, 0.12);
}
.baby-error {
 border: 1px solid var(--line);
 border-radius: 6px;
 background: var(--surface);
 margin-top: 8px;
 overflow: hidden;
}
.baby-error > summary {
 list-style: none;
 cursor: pointer;
 padding: 9px 11px;
 color: var(--cream);
 font-weight: 600;
 font-size: 0.84rem;
}
.baby-error > summary::-webkit-details-marker { display: none; }
.baby-error > summary::before {
 content: "▸ ";
 color: var(--orange-bright, #e0a83c);
}
.baby-error[open] > summary::before { content: "▾ "; }
.baby-error-body {
 padding: 0 11px 11px;
 border-top: 1px solid var(--line);
 color: var(--cream-dim);
 font-size: 0.84rem;
 line-height: 1.45;
}
.baby-error-body ol { margin: 8px 0 0; padding-left: 1.1rem; }
.baby-error-body li { margin: 0 0 6px; }
.baby-code {
 margin-top: 8px;
 padding: 10px;
 background: var(--surface);
 border: 1px solid var(--line);
 overflow: auto;
 font-size: 0.78rem;
 line-height: 1.4;
 white-space: pre-wrap;
 font-family: 'JetBrains Mono', monospace;
}

/* Lite install IA (guided + OS chooser) */
.install-pill-row {
 display: flex;
 flex-wrap: wrap;
 gap: 6px;
 margin: 0 0 12px;
}
.install-pill {
 font: 700 0.65rem JetBrains Mono, monospace;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 color: var(--cream-dim);
 border: 1px solid var(--line);
 border-radius: 4px;
 padding: 3px 8px;
}
.install-pill.ok {
 color: #43d98a;
 border-color: #2f6f4e;
 background: rgba(67, 217, 138, 0.08);
}
.install-path-strip {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 6px 4px;
 margin: 12px 0 0;
 font-size: 0.82rem;
 color: var(--cream-dim);
 line-height: 1.35;
}
.install-path-strip strong {
 color: var(--cream);
 font-weight: 700;
}
.install-path-strip .path-arrow {
 color: var(--accent-bright);
 margin: 0 2px;
 font-weight: 700;
}
.install-time-note {
 margin: 10px 0 0;
 font-size: 0.86rem;
 color: var(--cream-dim);
 line-height: 1.4;
}
.install-secondary-links {
 display: flex;
 flex-wrap: wrap;
 gap: 10px 16px;
 margin: 12px 0 0;
 font-size: 0.88rem;
}
.install-secondary-links a { color: var(--accent-bright); }
.setup-handles {
 margin-top: 14px;
 padding: 12px 14px;
 border: 1px solid var(--line);
 border-radius: 7px;
 background: var(--bg-elevated);
}
.setup-handles h4 {
 margin: 0 0 8px;
 font-size: 0.92rem;
}
.setup-handles ul {
 list-style: none;
 margin: 0;
 padding: 0;
 display: grid;
 gap: 5px;
}
.setup-handles li {
 margin: 0;
 font-size: 0.86rem;
 color: var(--cream);
 display: flex;
 gap: 8px;
 align-items: baseline;
}
.setup-handles .ok { color: #43d98a; font-weight: 700; }
.install-needs {
 margin-top: 12px;
 padding: 12px 14px;
 border: 1px dashed var(--line-bright);
 border-radius: 7px;
}
.install-needs h4 { margin: 0 0 8px; font-size: 0.92rem; }
.install-needs ul {
 list-style: none;
 margin: 0;
 padding: 0;
 display: grid;
 gap: 5px;
}
.install-needs li {
 margin: 0;
 font-size: 0.86rem;
 color: var(--cream-dim);
}
.install-success {
 margin-top: 14px;
 padding: 14px 16px;
 border: 1px solid #2f6f4e;
 border-radius: 8px;
 background: rgba(67, 217, 138, 0.08);
}
.install-success .success-kicker {
 margin: 0 0 6px;
 font: 700 0.68rem JetBrains Mono, monospace;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 color: #43d98a;
}
.install-success h4 {
 margin: 0 0 8px;
 font-size: 1.05rem;
 color: var(--cream);
}
.install-success p {
 margin: 0;
 font-size: 0.9rem;
 color: var(--cream-dim);
 line-height: 1.45;
}
.install-help-block {
 margin-top: 12px;
 border: 1px solid var(--line);
 border-radius: 7px;
 background: var(--surface);
 overflow: hidden;
}
.install-help-block > summary {
 list-style: none;
 cursor: pointer;
 padding: 12px 14px;
 font-weight: 700;
 color: var(--cream);
}
.install-help-block > summary::-webkit-details-marker { display: none; }
.install-help-block > summary::before {
 content: "▸ ";
 color: var(--accent-bright);
}
.install-help-block[open] > summary::before { content: "▾ "; }
.install-help-inner {
 padding: 0 14px 14px;
 border-top: 1px solid var(--line);
}
.install-help-inner h5 {
 margin: 14px 0 8px;
 font-size: 0.82rem;
 letter-spacing: 0.04em;
 text-transform: uppercase;
 color: var(--cream-dim);
}
.os-chooser {
 display: grid;
 grid-template-columns: 1fr;
 gap: 8px;
 margin: 10px 0 12px;
}
.os-chooser-btn {
 display: block;
 width: 100%;
 text-align: left;
 cursor: pointer;
 border: 1px solid var(--line);
 border-radius: 6px;
 background: var(--bg-elevated);
 color: var(--cream);
 padding: 10px 12px;
 font: 600 0.9rem Figtree, sans-serif;
}
.os-chooser-btn:hover { border-color: var(--accent); }
.os-chooser-btn.is-active {
 border-color: var(--accent);
 background: rgba(232, 140, 48, 0.1);
}
.os-chooser-btn .os-choice-sub {
 display: block;
 margin-top: 3px;
 font: 500 0.78rem Figtree, sans-serif;
 color: var(--cream-dim);
}
.os-path { display: none; }
.os-path.is-active { display: block; }
.manual-step-body .step-actions {
 margin: 8px 0 0;
 padding-left: 1.15rem;
}
.manual-step-body .step-actions li { margin: 0 0 6px; }

/* culture learning */
.culture-stage {
  margin-top: 8px;
  padding: 22px 20px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(57, 230, 200, 0.10), transparent 55%),
    radial-gradient(90% 70% at 100% 100%, rgba(242, 165, 88, 0.08), transparent 50%),
    var(--surface);
  position: relative;
  overflow: hidden;
}
.culture-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}
.culture-node {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 14px 16px;
  background: rgba(4, 12, 18, 0.55);
  min-height: 100%;
}
.culture-node.accent {
  border-color: rgba(57, 230, 200, 0.45);
  box-shadow: 0 0 0 1px rgba(57, 230, 200, 0.12), 0 0 28px rgba(57, 230, 200, 0.08);
}
.culture-kicker {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin-bottom: 8px;
}
.culture-node h4 {
  margin: 0 0 8px;
  font-size: 1.02rem;
  color: var(--cream);
}
.culture-node p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--cream-dim);
}
.culture-arrow {
  display: none;
}
.culture-pulse {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}
.pulse-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent-bright);
  box-shadow: 0 0 0 0 rgba(57, 230, 200, 0.55);
  animation: culture-pulse 2.2s ease-out infinite;
}
.pulse-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  color: var(--cream-faint);
  letter-spacing: 0.04em;
}
@keyframes culture-pulse {
  0% { box-shadow: 0 0 0 0 rgba(57, 230, 200, 0.55); }
  70% { box-shadow: 0 0 0 12px rgba(57, 230, 200, 0); }
  100% { box-shadow: 0 0 0 0 rgba(57, 230, 200, 0); }
}
@media (max-width: 900px) {
  .culture-rail {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .culture-rail {
    grid-template-columns: 1fr;
  }
}