/* The second brain explainer: drawn screens with demo data. Sits on top of the hub look. */
.demo { border: 1px solid var(--rule); border-radius: 18px; padding: 16px; background: var(--wash); display: grid; gap: 14px; }
@media (min-width: 900px) { .demo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 22px; gap: 18px; align-items: start; } }
.screen { background: var(--ground); border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; }
.screen-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--rule); font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px; color: var(--muted); }
.screen-top b { color: var(--ink); font-weight: 500; }
.demo-tag { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10.5px; border: 1px dashed var(--muted); color: var(--muted); border-radius: 999px; padding: 3px 8px; white-space: nowrap; }
.board { list-style: none; margin: 0; padding: 0; }
.board li { border-bottom: 1px solid var(--rule); }
.board li:last-child { border-bottom: 0; }
.board button { display: grid; gap: 3px; width: 100%; min-height: 56px; text-align: start; background: none; border: 0; padding: 12px 14px; font: inherit; color: var(--ink); cursor: pointer; }
.board button:hover { background: var(--wash); }
.board button[aria-pressed="true"] { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.board .row1 { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.board .pname { font-family: "Space Grotesk", system-ui, sans-serif; font-weight: 700; font-size: 17px; letter-spacing: -.02em; }
.board .pstate { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; color: var(--accent-ink); }
.board .pnext { font-size: 14px; color: var(--muted); }
.ideas { border-top: 1px solid var(--rule); padding: 12px 14px; display: grid; gap: 8px; }
.ideas .small { display: block; }
.idea { border: 1px solid var(--rule); border-radius: 10px; padding: 10px 12px; font-size: 14.5px; background: var(--ground); }
.idea b { display: block; font-family: "Space Grotesk", system-ui, sans-serif; }
.idea.new { border-color: var(--accent-ink); background: var(--accent-soft); }
.now { padding: 14px; display: grid; gap: 8px; border-bottom: 1px solid var(--rule); }
.now h3 { font-size: 20px; letter-spacing: -.02em; }
.now dl { margin: 0; display: grid; gap: 6px; }
.now dl div { display: grid; grid-template-columns: 84px 1fr; gap: 10px; font-size: 14.5px; }
.now dt { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11.5px; color: var(--muted); padding-top: 2px; }
.now dd { margin: 0; }
.log { list-style: none; margin: 0; padding: 14px; display: grid; gap: 10px; }
.log li { display: grid; grid-template-columns: 84px 1fr; gap: 10px; font-size: 14.5px; }
.log time, .log .when { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11.5px; color: var(--muted); padding-top: 2px; }
.log li.new { background: var(--accent-soft); border-radius: 8px; padding: 8px; margin: -8px; }
.acts { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 14px 14px; }
.acts .hbtn { min-height: 44px; }
.phone { padding: 14px; display: grid; gap: 8px; min-height: 74px; }
.bubble { justify-self: end; max-width: 85%; background: var(--ink); color: var(--ground); border-radius: 14px 14px 4px 14px; padding: 9px 13px; font-size: 14.5px; }
.sys { justify-self: start; max-width: 90%; border: 1px solid var(--rule); border-radius: 14px 14px 14px 4px; padding: 8px 12px; font-size: 14px; color: var(--muted); background: var(--ground); }
.phone .empty { color: var(--muted); font-size: 14px; }
@media (prefers-reduced-motion: no-preference) {
  .bubble, .sys, .idea.new, .log li.new { animation: rise .35s ease both; }
  @keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}
.rules2 { display: grid; gap: 0; border-top: 1px solid var(--ink); }
.rules2 div { padding: 22px 0; border-bottom: 1px solid var(--rule); display: grid; gap: 6px; }
.rules2 b { font-family: "Space Grotesk", system-ui, sans-serif; font-size: clamp(28px, 6vw, 44px); letter-spacing: -.03em; line-height: 1.05; }
.rules2 span { color: var(--muted); max-width: 52ch; }
.code { position: relative; border: 1px solid var(--rule); border-radius: 12px; background: var(--wash); padding: 16px; margin: 0 0 18px; overflow-x: auto; }
.code pre { margin: 0; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 13px; line-height: 1.6; white-space: pre; }
.code pre.wrap { white-space: pre-wrap; font-family: "IBM Plex Sans", system-ui, sans-serif; font-size: 15.5px; }
.code .copy { margin-top: 14px; }
.warn { border-inline-start: 3px solid var(--accent); padding: 4px 0 4px 16px; margin: 0 0 8px; }
.warn b { display: block; font-family: "Space Grotesk", system-ui, sans-serif; font-size: 18px; margin-bottom: 4px; }
.warn p { margin: 0; color: var(--muted); max-width: 58ch; }
.how3 h3 { font-size: 21px; letter-spacing: -.02em; margin: 30px 0 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }