/* omajot site: warm paper and Notes yellow in light (the default), cool blue-grey in dark (the toggle). */
:root {
  --paper: #fbf8f1; --paper-2: #f3eee2; --card: #ffffff; --ink: #1f1d1a; --muted: #6a6358;
  --line: #e4ddcd; --accent: #f5c518; --accent-deep: #d69e00; --accent-ink: #8a6400;
  --code-bg: #f4efe3; --shadow: 0 1px 2px rgba(60, 45, 10, .06), 0 12px 32px rgba(60, 45, 10, .08);
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, Roboto, sans-serif;
  --mono: "JetBrains Mono", "SF Mono", ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;
  --radius: 14px; color-scheme: light;
  /* How much accent yellow tints highlighted panels; dark mode keeps it faint so panels stay grey. */
  --tint: 12%;
}
:root[data-theme="dark"] {
  --paper: #0d1117; --paper-2: #151b23; --card: #161c24; --ink: #eef2f6; --muted: #98a3b1;
  --line: #28313c; --accent: #f5c518; --accent-deep: #c99400; --accent-ink: #f5c518;
  --code-bg: #121820; --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .35); color-scheme: dark;
  --tint: 0%;
}

* { box-sizing: border-box }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.65 var(--sans) }
a { color: var(--accent-ink); text-underline-offset: 3px; text-decoration-thickness: 1px }
a:hover { text-decoration-thickness: 2px }
img { max-width: 100%; height: auto; display: block }
::selection { background: var(--accent); color: #1f1d1a }
:focus-visible { outline: 3px solid var(--accent-deep); outline-offset: 3px; border-radius: 4px }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--paper); padding: 8px 14px; border-radius: 8px; z-index: 30 }
.skip:focus { left: 12px }

/* header */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 28px; padding: 12px clamp(16px, 4vw, 48px);
  background: color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line) }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 750; font-size: 21px; letter-spacing: -.3px }
.brand svg { width: 30px; height: 30px }
#nav { display: flex; gap: 4px; flex: 1 }
#nav a { color: var(--muted); text-decoration: none; padding: 7px 12px; border-radius: 999px; font-size: 15px }
#nav a:hover { color: var(--ink); background: var(--paper-2) }
#nav a[aria-current] { color: var(--ink); background: var(--paper-2); font-weight: 600 }
.tools { display: flex; gap: 6px; align-items: center }
.tools button, .tools a { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: var(--muted); background: none; border: 0; cursor: pointer }
.tools button:hover, .tools a:hover { color: var(--ink); background: var(--paper-2) }
.tools svg { width: 19px; height: 19px }
.menu { display: none; margin-left: auto; font: 600 14px var(--sans); color: var(--ink); background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px }

main { max-width: 1120px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px) 40px }
section { padding: 56px 0; border-bottom: 1px solid var(--line) }
section:last-of-type { border-bottom: 0 }
h1, h2, h3 { line-height: 1.15; letter-spacing: -.02em; margin: 0 0 14px }
h1 { font-size: clamp(38px, 6vw, 66px); font-weight: 800; letter-spacing: -.035em }
h2 { font-size: clamp(27px, 3.4vw, 38px); font-weight: 750 }
h3 { font-size: 20px; font-weight: 700; margin-top: 30px }
p { margin: 0 0 16px }
.lede { font-size: clamp(18px, 2.1vw, 21px); color: var(--muted); max-width: 720px }
.eyebrow { font: 600 13px var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--accent-ink); margin-bottom: 14px }
.muted { color: var(--muted) }
ul, ol { padding-left: 22px; margin: 0 0 16px }
li { margin: 4px 0 }
hr { border: 0; border-top: 1px solid var(--line); margin: 32px 0 }

/* hero */
.hero { padding: 64px 0 40px; border-bottom: 0 }
.hero h1 em { font-style: normal; background: linear-gradient(transparent 62%, color-mix(in srgb, var(--accent) 70%, transparent) 62%); padding: 0 .06em }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 0 }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 12px; font-weight: 650; text-decoration: none; border: 1px solid var(--line); color: var(--ink); background: var(--card) }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #1f1d1a }
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); text-decoration: none }
.hero-shot { margin-top: 40px; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow) }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px }
.pills span { font: 13px var(--mono); padding: 5px 10px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--line); color: var(--muted) }

/* grids and cards */
.grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin-top: 26px }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px }
.card h3 { margin-top: 0; font-size: 18px; display: flex; gap: 10px; align-items: center }
.card p { color: var(--muted); font-size: 15.5px; margin: 0 }
.card .ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 22%, transparent); font-size: 18px }
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center }
.phones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 26px }
.phones figure, .shot { margin: 0; border-radius: 22px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); background: var(--card) }
.shot { border-radius: 16px; margin: 24px 0 }
figcaption { font-size: 14px; color: var(--muted); padding: 10px 14px; border-top: 1px solid var(--line) }

/* steps */
.steps { counter-reset: step; list-style: none; padding: 0; margin: 24px 0 }
.steps > li { counter-increment: step; position: relative; padding: 0 0 26px 52px; margin: 0 }
.steps > li::before { content: counter(step); position: absolute; left: 0; top: -2px; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #1f1d1a; font-weight: 800; display: grid; place-items: center }
.steps > li::after { content: ""; position: absolute; left: 16px; top: 36px; bottom: 4px; width: 2px; background: var(--line) }
.steps > li:last-child::after { display: none }
.steps h3 { margin: 2px 0 8px }

/* code */
code { font: .88em var(--mono); background: var(--code-bg); border: 1px solid var(--line); padding: 1px 6px; border-radius: 6px; overflow-wrap: anywhere }
pre { position: relative; font: 14px/1.6 var(--mono); background: var(--code-bg); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; overflow: auto; margin: 14px 0 20px }
pre code { background: none; border: 0; padding: 0; font: inherit; overflow-wrap: normal }
pre .c { color: var(--muted) }
pre .p { color: var(--accent-ink); user-select: none }
.copy { position: absolute; top: 8px; right: 8px; font: 12px var(--sans); color: var(--muted); background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 3px 9px; cursor: pointer }
.copy:hover { color: var(--ink) }

/* the terminal QR: real text, black on white like `omajot qr` prints it */
.terminal { background: #121820; color: #e6ebf1; border-radius: 16px; padding: 18px 20px 22px; box-shadow: var(--shadow); max-width: 480px; margin: 0 auto }
.terminal .bar { display: flex; gap: 7px; margin-bottom: 12px }
.terminal .bar i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57 }
.terminal .bar i:nth-child(2) { background: #febc2e } .terminal .bar i:nth-child(3) { background: #28c840 }
.terminal { min-width: 0; overflow: hidden }
/* Like a real terminal: lines never break mid-word; a long line scrolls sideways. */
.terminal pre { background: none; border: 0; padding: 0; margin: 0; color: inherit; font: 13px/1.35 var(--mono); overflow-x: auto; white-space: pre; word-break: normal }
.terminal .qr { display: inline-block; background: #fff; color: #000; font: 11px/1 "DejaVu Sans Mono", var(--mono); letter-spacing: 0; white-space: pre; margin: 10px 0 }

/* tables and notes */
.table { overflow-x: auto; margin: 18px 0 24px; border: 1px solid var(--line); border-radius: 12px }
table { border-collapse: collapse; width: 100%; font-size: 15px }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top }
th { background: var(--paper-2); font-weight: 650; white-space: nowrap }
tr:last-child td { border-bottom: 0 }
td code { white-space: nowrap }
.note { border-left: 4px solid var(--accent); background: color-mix(in srgb, var(--accent) var(--tint), var(--card)); border-radius: 0 12px 12px 0; padding: 14px 18px; margin: 20px 0 }
.note p:last-child { margin: 0 }
.toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0 }
.toc a { font-size: 14px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; color: var(--muted); background: var(--card) }
.toc a:hover { color: var(--ink) }
.page-head { padding: 52px 0 30px }
.diagram { margin: 26px 0; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px; overflow-x: auto }
.diagram svg { display: block; min-width: 640px; width: 100%; height: auto }
.diagram text { fill: var(--ink); font: 14px var(--sans) } .diagram .small { fill: var(--muted); font-size: 12px }
.diagram .box { fill: var(--paper-2); stroke: var(--line); stroke-width: 1.5 }
.diagram .hub { fill: color-mix(in srgb, var(--accent) 22%, var(--card)); stroke: var(--accent-deep) }
.diagram .wire { stroke: var(--muted); stroke-width: 1.6; fill: none }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin: 26px 0 }
.stats div { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px }
.stats strong { display: block; font-size: 30px; letter-spacing: -.02em; color: var(--ink) }
.stats span { color: var(--muted); font-size: 14px }
kbd { font: 13px var(--mono); padding: 1px 7px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; background: var(--card); white-space: nowrap }

.foot { max-width: 1120px; margin: 0 auto; padding: 26px clamp(16px, 4vw, 40px) 40px; display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between; color: var(--muted); font-size: 14px; border-top: 1px solid var(--line) }

/* A pure-CSS iPhone frame around real simulator screenshots (they show the Dynamic Island). */
.iphones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2.4vw, 30px); margin-top: 30px }
.iphones.three { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 820px; margin-left: auto; margin-right: auto }
.iphones figure { margin: 0; text-align: center }
.iphones figcaption { color: var(--muted); font-size: 14px; margin-top: 14px }
.iphone { padding: 3.2%; border-radius: 15% / 7%; background: linear-gradient(150deg, #3a3a3e, #121214 45%, #26262a);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 0 0 1px rgba(0, 0, 0, .35), var(--shadow), 0 26px 50px -18px rgba(0, 0, 0, .45) }
.iphone picture, .iphone img { display: block; border-radius: 12.5% / 5.8%; overflow: hidden }
.shots-note { font-size: 13px; text-align: center; margin-top: 18px }
.band { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px 36px; align-items: center; margin: 12px 0;
  padding: clamp(22px, 4vw, 40px); border-radius: 22px; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  background: color-mix(in srgb, var(--accent) var(--tint), var(--card)); box-shadow: var(--shadow) }
.band h2 { margin-top: 0 }
.band .checks { list-style: none; margin: 0; padding: 0 }
.band .checks li { padding: 7px 0 7px 30px; position: relative; border-bottom: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line)) }
.band .checks li:last-child { border-bottom: 0 }
.band .checks li::before { content: "✓"; position: absolute; left: 4px; color: var(--accent-deep); font-weight: 700 }
.band-cta { grid-column: 1 / -1; margin: 6px 0 0 }

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr }
  .phones { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px }
  .iphones { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 560px; margin-left: auto; margin-right: auto }
  .band { grid-template-columns: 1fr }
}
@media (max-width: 760px) {
  body { font-size: 16px }
  .top { flex-wrap: wrap; gap: 10px }
  .menu { display: block }
  .tools { order: 2 }
  #nav { display: none; order: 3; flex-basis: 100%; flex-direction: column; padding: 6px 0 4px }
  #nav.open { display: flex }
  #nav a { padding: 10px 12px }
  section { padding: 40px 0 }
  .hero { padding-top: 36px }
  .phones { grid-template-columns: 1fr 1fr }
  .phones figure:nth-child(3) { display: none }
  .terminal { padding: 14px 12px 16px }
  .terminal pre { font-size: 11.5px }
  .terminal .qr { font-size: 7.5px }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } .btn:hover { transform: none } }

/* Optional detail, collapsed: <details><summary>…</summary>…</details> */
details { border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 0 18px; margin: 18px 0 }
details[open] { padding-bottom: 6px }
summary { cursor: pointer; font-weight: 650; padding: 13px 0; list-style-position: outside }
summary:hover { color: var(--accent-ink) }
details .table { margin: 10px 0 16px }

/* Where a section applies (Get started): hub computer, every device, Omarchy only, optional. */
.badge { display: inline-block; vertical-align: middle; font: 600 12px/1 var(--sans); letter-spacing: .02em; padding: 5px 9px; border-radius: 999px; margin-left: 6px; border: 1px solid var(--line); color: var(--muted); background: var(--paper-2); white-space: nowrap }
h2 .badge:first-of-type { margin-left: 10px }
p .badge { margin: 0 2px }
.badge.hub { color: #1d4ed8; background: #dbeafe; border-color: #bfdbfe }
.badge.all { color: #047857; background: #d1fae5; border-color: #a7f3d0 }
.badge.omarchy { color: #7c3aed; background: #ede9fe; border-color: #ddd6fe }
:root[data-theme="dark"] .badge.hub { color: #93c5fd; background: #172554; border-color: #1e3a8a }
:root[data-theme="dark"] .badge.all { color: #6ee7b7; background: #052e24; border-color: #065f46 }
:root[data-theme="dark"] .badge.omarchy { color: #c4b5fd; background: #2e1065; border-color: #4c1d95 }
.paths { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0 }
@media (max-width: 720px) { .paths { grid-template-columns: 1fr } }