:root {
  color-scheme: light;
  --paper: #f4f2ed;
  --paper-2: #ebe8e1;
  --card: #fbfaf7;
  --ink: #121417;
  --ink-2: #464b53;
  --ink-3: #767b83;
  --rule: #d8d4ca;
  --blue: #1f63e6;
  --blue-hi: #2f7bff;
  --dark: #121417;
  --dark-rule: #2e3239;
  --head: "Archivo", "Segoe UI", system-ui, sans-serif;
  --body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", Consolas, ui-monospace, monospace;
  --max: 1180px;
  --bar: rgba(244, 242, 237, .92);
  --on-ink: #fff;
  --ink-hover: #000;
  --shadow: rgba(18, 20, 23, .35);
}
:root[dir="rtl"] {
  --head: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --body: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  min-width: 320px;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--head); font-weight: 700; }
p { margin: 0; }
::selection { background: var(--blue); color: #fff; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.wrap { width: min(var(--max), calc(100% - 64px)); margin-inline: auto; }
.skip-link { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 100; padding: 8px 14px; background: var(--ink); color: var(--on-ink); }
.skip-link:focus { top: 12px; }

/* Buttons and links */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px;
  border: 0; border-radius: 6px;
  background: var(--blue); color: #fff;
  font: 600 16px/1 var(--body); text-decoration: none;
  transition: background .15s;
}
.button:hover { background: #1853c4; }
.button svg { width: 18px; height: 18px; flex: none; }
.button-small { min-height: 40px; padding: 0 16px; font-size: 15px; }
.button-ink { background: var(--ink); }
.button-ink { color: #fff; }
.button-ink:hover { background: #000; }
.text-link {
  color: var(--ink); font-weight: 500;
  text-decoration: underline; text-decoration-color: var(--rule); text-decoration-thickness: 2px; text-underline-offset: 5px;
  transition: text-decoration-color .15s;
}
.text-link:hover { text-decoration-color: var(--blue); }

/* Header */
.topbar { position: sticky; top: 0; z-index: 50; background: var(--bar); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); }
.nav { display: flex; align-items: center; gap: 36px; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.mark { width: 26px; height: 26px; color: var(--blue); }
.brand-name { font: 800 20px/1 "Archivo", var(--head); font-stretch: 112%; letter-spacing: -.01em; }
.nav-links { display: flex; gap: 28px; }
.nav-links a { color: var(--ink-2); font-size: 15px; text-decoration: none; transition: color .15s; }
.nav-links a:hover { color: var(--ink); }
.nav-actions { display: flex; align-items: center; gap: 12px; margin-inline-start: auto; }
.lang-toggle {
  min-height: 40px; padding: 0 12px; border: 1px solid var(--rule); border-radius: 6px; background: transparent;
  color: var(--ink-2); cursor: pointer; font: 500 15px/1 "IBM Plex Sans Arabic", var(--body);
}
.lang-toggle:hover { border-color: var(--ink-3); color: var(--ink); }
.menu-toggle { display: none; width: 42px; height: 40px; place-items: center; border: 1px solid var(--rule); border-radius: 6px; background: transparent; cursor: pointer; }

/* Hero */
.hero { padding: 96px 0 112px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.hero h1 {
  font-size: clamp(42px, 5.6vw, 72px); line-height: 1.02; letter-spacing: -.025em;
  font-stretch: 108%; font-weight: 800; max-width: 12em;
}
:root[dir="rtl"] .hero h1 { font-size: clamp(36px, 4.6vw, 58px); line-height: 1.3; letter-spacing: 0; font-weight: 700; }
.lead { margin-top: 28px; max-width: 34em; color: var(--ink-2); font-size: 18.5px; line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 36px; }

.specs { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 0; margin: 44px 0 0; border-top: 1px solid var(--rule); }
.specs > div { padding: 14px 28px 0 0; }
:root[dir="rtl"] .specs > div { padding: 14px 0 0 28px; }
.specs dt { color: var(--ink-3); font-size: 13px; }
.specs dd { margin: 2px 0 0; font: 500 15px/1.3 var(--mono); unicode-bidi: plaintext; }
:root[dir="rtl"] .specs dd { font-family: var(--body); text-align: right; }

/* Session log */
.log {
  margin: 0; background: var(--card); border: 1px solid var(--rule); border-radius: 8px;
  box-shadow: 0 1px 0 rgba(0,0,0,.03), 0 24px 48px -28px var(--shadow);
  font-family: var(--mono);
}
.log-head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 14px 20px; border-bottom: 1px solid var(--rule);
  font: 600 14px/1.3 var(--body);
}
.log-state { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-3); font: 500 13px/1 var(--mono); }
.log-state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #1f9d55; }
[data-state="stopped"] .log-state::before { background: var(--ink-3); }
:root[dir="rtl"] .log-state { font-family: var(--body); }
.log-lines { margin: 0; padding: 14px 0; list-style: none; min-height: 268px; }
.log-lines li {
  display: grid; grid-template-columns: 56px 1fr; gap: 8px; padding: 6px 20px;
  font-size: 14px; line-height: 1.5; color: var(--ink);
  animation: line-in .25s ease both;
}
:root[dir="rtl"] .log-lines li { font-family: var(--body); font-size: 15px; }
.log-lines time { color: var(--ink-3); font-family: var(--mono); font-size: 14px; direction: ltr; text-align: start; }
.log-lines li.waiting span::after {
  content: ""; display: inline-block; width: 8px; height: 15px; margin-inline-start: 6px; vertical-align: -2px;
  background: var(--blue); animation: blink 1s steps(1) infinite;
}
.log-lines li:nth-child(n+5) span { color: var(--blue); }
@keyframes blink { 50% { opacity: 0; } }
@keyframes line-in { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .log-lines li { animation: none; } .log-lines li.waiting span::after { animation: none; } }
.log-foot { padding: 16px 20px 18px; border-top: 1px solid var(--rule); background: var(--paper-2); border-radius: 0 0 8px 8px; }
.log-btn {
  width: 100%; min-height: 44px; border: 1px solid var(--ink); border-radius: 6px; background: var(--ink); color: var(--on-ink);
  cursor: pointer; font: 600 15px/1 var(--body); transition: background .15s, color .15s;
}
.log-btn:hover { background: var(--ink-hover); }
[data-state="stopped"] .log-btn { background: transparent; color: var(--ink); }
[data-state="stopped"] .log-btn:hover { background: var(--card); }
.log figcaption { margin-top: 10px; color: var(--ink-3); font: 13.5px/1.4 var(--body); }
.st-running, .st-stopped { display: none; }
[data-state="running"] .st-running, [data-state="stopped"] .st-stopped { display: inline; }

/* Sections */
.section { padding: 104px 0; border-top: 1px solid var(--rule); }
.split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.split-head h2 { font-size: clamp(30px, 3.4vw, 42px); line-height: 1.1; letter-spacing: -.02em; font-stretch: 106%; }
:root[dir="rtl"] .split-head h2 { line-height: 1.35; letter-spacing: 0; }
.split-head p { margin-top: 16px; color: var(--ink-2); max-width: 28em; }
.split > .split-head { position: sticky; top: 100px; }
.split-head.wide { max-width: 720px; margin-bottom: 64px; }

.rows { margin: 0; border-top: 2px solid var(--ink); }
.rows > div { display: grid; grid-template-columns: 200px 1fr; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--rule); }
.rows dt { font: 600 17px/1.5 var(--head); }
.rows dd { margin: 0; color: var(--ink-2); }

.dark { background: var(--dark); color: #eef0f3; border-top: 0; }
.dark .split-head p { color: #a9aeb6; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--dark-rule); }
.steps li { padding: 32px 36px 8px 0; }
:root[dir="rtl"] .steps li { padding: 32px 0 8px 36px; }
.steps li + li { border-inline-start: 1px solid var(--dark-rule); padding-inline-start: 36px; }
.num { display: block; color: var(--blue-hi); font: 500 44px/1 var(--mono); }
.steps h3 { margin-top: 28px; font-size: 21px; line-height: 1.3; }
.steps p { margin-top: 10px; color: #a9aeb6; }

.faq { border-top: 2px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  display: flex; justify-content: space-between; align-items: baseline; gap: 24px;
  padding: 20px 0; cursor: pointer; list-style: none;
  font: 600 17.5px/1.45 var(--head);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; color: var(--ink-3); font: 400 24px/1 var(--mono); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--blue); }
.faq details p { max-width: 38em; padding: 0 0 24px; color: var(--ink-2); }

/* Download band */
.get { background: var(--blue); color: #fff; }
.get-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; padding: 64px 0; }
.get h2 { font-size: clamp(30px, 4vw, 48px); line-height: 1.1; letter-spacing: -.02em; font-stretch: 108%; font-weight: 800; }
:root[dir="rtl"] .get h2 { letter-spacing: 0; line-height: 1.3; }
.get p { margin-top: 8px; color: rgba(255,255,255,.82); }
.get .button span { font-family: var(--mono); font-weight: 500; }

/* Footer */
.footer { background: var(--paper); padding: 32px 0 40px; }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.footer .brand-name { font-size: 17px; }
.footer .mark { width: 22px; height: 22px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.footer-links a { color: var(--ink-2); font-size: 15px; text-decoration: none; }
.footer-links a:hover { color: var(--ink); }
.footer-note { margin-inline-start: auto; color: var(--ink-3); font-size: 14px; }


/* Night theme */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0f1113;
  --paper-2: #171a1e;
  --card: #15181c;
  --ink: #eceef1;
  --ink-2: #a8adb5;
  --ink-3: #757b84;
  --rule: #2a2e34;
  --blue: #2f73f0;
  --blue-hi: #4b8dff;
  --dark: #08090b;
  --dark-rule: #23272d;
  --bar: rgba(15, 17, 19, .9);
  --on-ink: #0f1113;
  --ink-hover: #ffffff;
  --shadow: rgba(0, 0, 0, .7);
}
:root[data-theme="dark"] .button-ink { background: #0f1113; }
:root[data-theme="dark"] .button-ink:hover { background: #000; }
:root[data-theme="dark"] .log-state::before { background: #3ccf7c; }

.theme-toggle {
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--rule); border-radius: 6px; background: transparent; color: var(--ink-2); cursor: pointer;
}
.theme-toggle:hover { border-color: var(--ink-3); color: var(--ink); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .moon { display: none; }
:root[data-theme="dark"] .theme-toggle .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .moon { display: block; }
body, .topbar, .log, .log-foot, .rows > div, .faq details { transition: background-color .25s, border-color .25s, color .25s; }

/* Responsive */
@media (max-width: 980px) {
  .hero { padding: 64px 0 80px; }
  .hero-grid { grid-template-columns: 1fr; gap: 56px; }
  .split { grid-template-columns: 1fr; gap: 36px; }
  .split > .split-head { position: static; }
  .steps { grid-template-columns: 1fr; border-top: 0; }
  .steps li, :root[dir="rtl"] .steps li { padding: 28px 0; border-top: 1px solid var(--dark-rule); }
  .steps li + li { border-inline-start: 0; padding-inline-start: 0; }
  .num { font-size: 32px; }
  .steps h3 { margin-top: 14px; }
}
@media (max-width: 760px) {
  .menu-toggle { display: grid; }
  .nav { gap: 12px; }
  .nav-links {
    position: absolute; top: 100%; inset-inline: 0; display: none; flex-direction: column; gap: 0;
    padding: 4px 20px 12px; background: var(--paper); border-bottom: 1px solid var(--rule);
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 14px 0; font-size: 17px; border-bottom: 1px solid var(--rule); }
  .nav-links a:last-child { border-bottom: 0; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .wrap { width: calc(100% - 32px); }
  .section { padding: 72px 0; }
  .lead { font-size: 17px; }
  .hero-actions .button { width: 100%; }
  .specs { grid-template-columns: 1fr 1fr; }
  .rows > div { grid-template-columns: 1fr; gap: 4px; }
  .log-lines { min-height: 0; }
  .log-lines li { grid-template-columns: 48px 1fr; padding-inline: 16px; }
  .get-inner { padding: 48px 0; }
  .get .button { width: 100%; }
  .footer-note { margin-inline-start: 0; width: 100%; }
}
@media (max-width: 400px) {
  .button-small { display: none; }
}