/* Azrak website. Dark by default, light on request. The hero, the launcher's screens and
   AzrakOS are always dark, as the launcher is. Every size is a step of one golden scale. */

@font-face { font-family: "Inter"; src: url(fonts/inter.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url(fonts/inter-tight.woff2) format("woff2"); font-weight: 500 700; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url(fonts/geist-mono-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }

:root {
  color-scheme: dark;
  --page: #05070f;
  --card: #0b0f1f;
  --ink: #f5f7fb;
  --ink-2: #c3cbdd;
  --ink-3: #939cb2;
  --quiet: #6f7890;
  --line: rgba(255,255,255,0.08);
  --chip: rgba(255,255,255,0.06);
  --tab-on: rgba(255,255,255,0.13);
  --edge: rgba(255,255,255,0.08);
  --accent-ink: #8dbaff;
  --solid: #f5f7fb;
  --solid-fg: #05070f;

  /* Always dark: the launcher's own colours (ui/theme.slint) */
  --night: #05070f;
  --night-2: #0b0f1f;
  --night-3: #121a31;
  --l-text: #f5f7fb;
  --l-text-2: #b9c3da;
  --l-text-3: #7d88a3;
  --l-blue: #8dbaff;
  --l-ok: #3ddc97;
  --l-warn: #ffb547;
  --l-bad: #ff5a6a;
  --l-violet: #c4b5fd;
  --blue: #0a6cff;

  --display: "Inter Tight", Inter, system-ui, sans-serif;
  --body: Inter, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --wide: 1240px;
  --gutter: clamp(16px, 4vw, 24px);

  /* The golden ratio in half steps (×1.272): every second step is ×1.618 */
  --s-1: 12.5px; --s0: 16px; --s1: 20px; --s2: 26px; --s3: 33px;
  --s4: 42px; --s5: 53px; --s6: 68px; --s7: 87px; --s8: 110px;
}
/* Light: ink on paper. Warm off-white like a book page, deep-navy type, and the launcher's
   pieces in deep Azrak blue instead of black, so nothing cuts a hole in the page. */
:root[data-theme="light"] {
  color-scheme: light;
  --page: #f4efe6;
  --paper-2: #efe8dc;
  --paper-3: #ebe3d5;
  --card: #fbf8f2;
  --ink: #1a2240;
  --ink-2: #474e69;
  --ink-3: #6d7088;
  --quiet: #8a8a95;
  --line: #e0d8c8;
  --chip: #ebe4d7;
  --tab-on: #fffdf8;
  --edge: #e0d8c8;
  --accent-ink: #0652c8;
  --solid: #1a2240;
  --solid-fg: #ffffff;
  --night-2: #1c2a52;
  --night-3: #24345f;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--ink); font: 400 var(--s0)/1.55 var(--body); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
/* Width and height attributes reserve the space while loading; the CSS decides the shape. */
img { height: auto; }
a { color: var(--accent-ink); }
a:hover { color: var(--ink); }
h1, h2, h3, p, ol, ul { margin: 0; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }

.wrap { max-width: var(--wide); margin: 0 auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 50; padding: 10px 16px; border-radius: 10px; background: var(--solid); color: var(--solid-fg); }
.skip:focus { left: 8px; }
.disp { font-family: var(--display); letter-spacing: -0.045em; font-weight: 600; }
.eyebrow { font: 500 var(--s-1)/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-ink); }
.dark .eyebrow { color: var(--l-blue); }

/* Buttons */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 28px; border-radius: 999px; background: var(--l-text); color: var(--night); font: 600 var(--s0)/1 var(--body); text-decoration: none; transition: transform .15s ease, background-color .15s ease; }
.pill:hover { color: var(--night); background: #fff; transform: translateY(-1px); }
.pill svg { width: 16px; height: 16px; }
.ghost { display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 4px; color: var(--l-text); font: 500 var(--s0)/1 var(--body); text-decoration: none; }
.ghost:hover { color: var(--l-blue); }
.ghost .arr { transition: transform .2s ease; }
.ghost:hover .arr { transform: translateX(4px); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 12px; border: 0; font: 600 15px/1 var(--body); text-decoration: none; cursor: pointer; transition: transform .15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn svg { width: 16px; height: 16px; }
.btn-blue { background: var(--blue); color: #fff; }
.btn-blue:hover { color: #fff; }
.btn-solid { background: var(--solid); color: var(--solid-fg); }
.btn-solid:hover { color: var(--solid-fg); }

/* ── 1 · The first screen: one composition over the blue wall ── */
.hero { position: relative; height: max(640px, 100svh); overflow: hidden; background: var(--night); color: var(--l-text); }
/* Its own layer: leaning moves it without repainting the tinted covers. */
.wall { will-change: transform; position: absolute; left: 26%; top: -260px; width: max(1500px, 104%); display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 16px; transform: rotate(-12deg) translate3d(var(--px, 0px), var(--py, 0px), 0); transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.wall img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 12px; background: var(--night-3); filter: grayscale(1) sepia(1) hue-rotate(178deg) saturate(3.2) brightness(.62) contrast(1.08); transition: filter .45s ease, transform .45s ease, box-shadow .45s ease; }
.wall img.on, .wall img:hover { filter: none; transform: scale(1.04); box-shadow: 0 0 48px rgba(141,186,255,.6); outline: 3px solid #fff; outline-offset: 3px; position: relative; z-index: 1; }
.hero .tint { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 70% at 72% 45%, rgba(10,108,255,.10), rgba(5,7,15,0) 70%); }
.hero .fade { position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(90deg, #05070f 0%, rgba(5,7,15,.95) 26%, rgba(5,7,15,.55) 44%, rgba(5,7,15,.05) 64%),
  linear-gradient(180deg, rgba(5,7,15,.92) 0%, rgba(5,7,15,.6) 9%, rgba(5,7,15,0) 22%, rgba(5,7,15,0) 72%, rgba(5,7,15,.92) 90%, #05070f 100%); }
.hero > .wrap { position: relative; height: 100%; pointer-events: none; }
.hero > .wrap > * { pointer-events: auto; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 28px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--l-text); text-decoration: none; font: 700 var(--s2)/1 var(--display); letter-spacing: -0.02em; }
.brand img { width: 42px; height: 42px; transition: transform .3s ease; }
.brand:hover { color: #fff; }
.brand:hover img { transform: rotate(-6deg); }
.links { display: flex; gap: 32px; }
.links a { color: var(--l-text-2); text-decoration: none; position: relative; }
.links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: var(--l-text); transform: scaleX(0); transition: transform .2s ease; }
.links a:hover { color: #fff; }
.links a:hover::after { transform: scaleX(1); }
.right { display: flex; align-items: center; gap: 10px; }
.gh { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 20px 0 16px; border-radius: 999px; color: var(--l-text); font: 500 var(--s0)/1 var(--body); text-decoration: none; background: rgba(5,7,15,.6); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background-color .15s, box-shadow .15s; }
.gh:hover { color: #fff; background: rgba(5,7,15,.85); box-shadow: inset 0 0 0 1px rgba(255,255,255,.32); }
.gh svg { width: 18px; height: 18px; }
.theme { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; border: 0; background: rgba(5,7,15,.6); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); color: var(--l-text-2); cursor: pointer; transition: color .15s, transform .3s ease; }
.theme:hover { color: #fff; transform: rotate(20deg); }
.theme svg { width: 18px; height: 18px; }
.theme .moon, :root[data-theme="light"] .theme .sun { display: none; }
:root[data-theme="light"] .theme .moon { display: block; }
.copy { margin-top: clamp(60px, 15vh, 160px); max-width: 640px; display: flex; flex-direction: column; gap: var(--s2); }
.copy h1 { font-size: clamp(var(--s4), 7.6vw, var(--s7)); line-height: .95; }
.copy h1 span { color: #6f8fc7; }
.copy p { font-size: var(--s1); line-height: 1.5; color: var(--l-text-2); max-width: 520px; }
.acts { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: var(--s0); }
.built { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 40px; }
.built .lab { font: 500 var(--s-1)/1 var(--mono); letter-spacing: .14em; color: var(--quiet); }
.marks { display: flex; flex-wrap: wrap; gap: 16px 48px; }
.marks a { font: 700 var(--s1)/1 var(--display); letter-spacing: -0.02em; color: #8b93a7; text-decoration: none; transition: color .2s ease; }
.marks a:hover { color: #fff; }

/* ── 2 · Two ways in ── */
.get { padding-block: var(--s6) var(--s7); }
.get .head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: var(--s3); }
.get h2 { font-size: var(--s4); line-height: 1; }
.get .head p { color: var(--ink-3); }
.ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 16px; }
/* A soft light follows the pointer across each card. */
.way { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: var(--s1); min-width: 0; padding: var(--s2); border-radius: var(--s2); background: var(--card); box-shadow: inset 0 0 0 1px var(--edge); }
.way::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s ease; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(10,108,255,.14), transparent 60%); }
.way:hover::before { opacity: 1; }
.way > * { position: relative; }
.wh { display: flex; align-items: center; gap: 14px; }
.wi { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; }
.wi img { width: 30px; height: 30px; }
.wi svg { width: 22px; height: 22px; }
.way h3 { font: 600 var(--s1)/1.2 var(--display); letter-spacing: -0.015em; }
.way .sub { margin-top: 2px; color: var(--ink-3); }
.tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--chip); align-self: flex-start; }
.tabs button { min-height: 36px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: var(--ink-3); font: 500 14px/1 var(--body); cursor: pointer; }
.tabs button[aria-selected="true"] { background: var(--tab-on); color: var(--ink); box-shadow: 0 1px 2px rgba(10,12,18,.12); }
.panel-tab[hidden] { display: none; }
.cmd { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-radius: 14px; background: #070a14; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
/* No scrollbar across it (light mode drew it bright white); it still scrolls, and fades at the edge to say there's more. */
.cmd code { flex: 1 1 auto; min-width: 0; overflow-x: auto; white-space: nowrap; font: 500 13px/2.2 var(--mono); color: #dfe4ef; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); }
.cmd code::-webkit-scrollbar { display: none; }
.cmd code .p { color: var(--l-text-3); user-select: none; }
.cmd button { flex: none; min-height: 36px; padding: 0 14px; border-radius: 9px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.08); color: #fff; font: 500 13px/1 var(--body); cursor: pointer; }
.cmd button:hover { background: rgba(255,255,255,.16); }
.row-a { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.note { font-size: 14px; color: var(--ink-3); }
.steps { padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--ink-2); }
.steps li { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: var(--chip); }
.steps .n { font: 500 12px/1 var(--mono); color: var(--accent-ink); }
.wf { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); font: 500 12px/1.4 var(--mono); color: var(--ink-3); }
.wf a { color: var(--ink-3); }

/* ── 3 · Home, live ── */
.home { padding-bottom: var(--s8); }
.home .lead { text-align: center; margin: 0 auto var(--s4); max-width: 760px; }
.home h2 { font-size: clamp(var(--s4), 5.4vw, var(--s6)); line-height: 1; }
.home .lead p { margin-top: var(--s1); font-size: var(--s1); color: var(--ink-2); }
.bezel { padding: clamp(4px, .6vw, 8px); border-radius: clamp(14px, 2.4vw, 30px); background: var(--night-3); box-shadow: 0 60px 140px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.08); }
.try { margin-top: 18px; text-align: center; font: 500 var(--s-1)/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--quiet); }

/* The launcher's Home, measured from it at 1920×1080 (1cqw = 19.2 px there); scales as one picture. */
.scr { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: clamp(10px, 1.8vw, 22px); container-type: inline-size; background: var(--night); color: var(--l-text); font-weight: 600; }
.scr .art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transform-origin: 50% 65%; opacity: 0; transition: opacity .55s ease; }
.scr .art.on { opacity: 1; }
.scr .shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(5,7,15,.55) 0%, rgba(5,7,15,0) 22%, rgba(5,7,15,0) 48%, rgba(5,7,15,.92) 92%), linear-gradient(90deg, rgba(5,7,15,.7), rgba(5,7,15,0) 58%); }
.s-tabs { position: absolute; top: 1.7cqw; left: 5.2cqw; display: flex; gap: 2.8cqw; font-size: 1.56cqw; font-weight: 500; }
.s-tabs span:first-child { display: flex; flex-direction: column; align-items: center; gap: .5cqw; }
.s-tabs span:first-child::after { content: ""; width: 1.45cqw; height: .16cqw; border-radius: 1cqw; background: var(--l-text); }
.s-tabs span + span { color: var(--l-text-2); }
.s-bar { position: absolute; top: 1.05cqw; right: 5.2cqw; height: 3.33cqw; display: flex; align-items: center; gap: 1cqw; padding: 0 1.4cqw 0 1.1cqw; border-radius: 99cqw; background: rgba(22,28,46,.55); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); font-size: 1.32cqw; }
.s-bar .ring { width: 1.75cqw; height: 1.75cqw; }
.s-bar .ring circle + circle { transition: stroke-dasharray .8s linear; }
.s-bar .sep { width: 1px; height: 1.5cqw; background: rgba(255,255,255,.2); }
.s-bar .pct { display: inline-block; min-width: 9.4cqw; }
.s-bar .gear { position: relative; width: 1.45cqw; height: 1.45cqw; }
.s-bar .gear svg { width: 100%; height: 100%; }
.s-bar .gear::after { content: ""; position: absolute; top: -.25cqw; right: -.3cqw; width: .62cqw; height: .62cqw; border-radius: 50%; background: var(--l-warn); box-shadow: 0 0 0 .14cqw #1b2133; }
/* The game's block has a fixed place and size, so changing games never moves anything else. */
.s-hero { position: absolute; left: 5.2cqw; top: 9.6cqw; width: 62cqw; height: 23cqw; display: flex; flex-direction: column; align-items: flex-start; gap: 1.1cqw; }
.s-kick { font: 500 .95cqw/1 var(--mono); letter-spacing: .12em; color: var(--l-blue); }
.s-logos { position: relative; width: 30cqw; height: 6.5cqw; flex: none; }
.s-logo { position: absolute; left: 0; bottom: 0; overflow: hidden; opacity: 0; transform: translateY(.5cqw); transition: opacity .35s ease, transform .35s ease; filter: drop-shadow(0 .3cqw 1cqw rgba(0,0,0,.6)); }
.s-logo.on { opacity: 1; transform: none; }
.s-logo img { position: absolute; max-width: none; height: auto; }
.s-chips { display: flex; flex-wrap: nowrap; gap: .6cqw; font-size: .9cqw; font-weight: 500; color: #dfe4ef; white-space: nowrap; }
.s-chips span { display: inline-flex; align-items: center; height: 2cqw; padding: 0 .9cqw; border-radius: 99cqw; background: rgba(20,24,36,.62); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.s-chips b { margin-left: .4cqw; color: #ffc940; }
.s-chips .ok { background: rgba(10,40,30,.82); color: var(--l-ok); }
.s-about { max-width: 38cqw; height: 2.85cqw; overflow: hidden; font-size: 1.05cqw; line-height: 1.35; font-weight: 400; color: #dfe4ef; }
.s-btns { display: flex; gap: .85cqw; margin-top: .5cqw; }
.s-btns button { display: inline-flex; align-items: center; justify-content: center; gap: .7cqw; height: 3.4cqw; min-width: 11cqw; padding: 0 1.9cqw; border: 0; border-radius: 99cqw; background: rgba(40,46,62,.75); color: var(--l-text); font: 600 1.2cqw/1 var(--body); white-space: nowrap; cursor: pointer; transition: background-color .15s, color .15s, box-shadow .15s, transform .1s; }
.s-btns button svg { width: 1.15cqw; height: 1.15cqw; }
.s-btns button.on { background: #eef0f4; color: var(--night); box-shadow: 0 0 0 .25cqw rgba(10,108,255,.6); }
.s-btns button:active { transform: scale(.96); }
.s-btns button:focus-visible { outline: none; }
.s-row { position: absolute; left: 5.2cqw; right: 5.2cqw; bottom: 3.4cqw; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1.1cqw; }
.s-row button { display: block; padding: 0; border: 0; background: none; border-radius: .8cqw; cursor: pointer; transition: transform .25s ease; }
.s-row button:focus-visible { outline: none; }
.s-row img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: .8cqw; background: var(--night-3); outline: .18cqw solid transparent; outline-offset: .2cqw; transition: outline-color .2s ease, box-shadow .25s ease; }
.s-row button.on { transform: translateY(-.5cqw); }
.s-row button.on img { outline-color: #fff; box-shadow: 0 0 1.8cqw rgba(141,186,255,.55); }

/* ── 4 · What it does: rows, text and one piece of the real UI, split 1 : 1.618 ── */
.rows { padding-bottom: var(--s7); }
.row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr); gap: var(--s6); align-items: center; padding-block: var(--s6); border-top: 1px solid var(--line); }
.row.flip { grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr); }
.row.flip .txt { order: 2; }
.txt h3 { margin-top: var(--s0); font: 600 var(--s4)/1.02 var(--display); letter-spacing: -0.035em; }
.txt p { margin-top: var(--s1); font-size: var(--s1); line-height: 1.5; color: var(--ink-2); max-width: 440px; }
.txt .hint { margin-top: var(--s1); font: 500 var(--s-1)/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--quiet); }
/* The UI pieces are the launcher's, so they stay dark in light mode too. */
.vis { display: flex; flex-direction: column; gap: 10px; padding: var(--s2); border-radius: var(--s2); background: var(--night-2); color: var(--l-text); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.pick-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pick-row button { min-height: 38px; padding: 0 16px; border-radius: 999px; border: 0; background: rgba(255,255,255,.06); color: var(--l-text-2); font: 500 14px/1 var(--body); cursor: pointer; transition: background-color .15s, color .15s; }
.pick-row button:hover { color: #fff; }
.pick-row button[aria-pressed="true"] { background: var(--l-text); color: var(--night); }
.hub { display: flex; flex-direction: column; gap: 16px; padding: 22px; border-radius: 18px; background: rgba(255,255,255,.035); }
.hub-top { display: flex; align-items: center; gap: 16px; }
.hub-top img { width: 64px; height: 96px; border-radius: 10px; object-fit: cover; background: var(--night-3); }
.hub-top b { display: block; font: 600 var(--s2)/1.1 var(--display); letter-spacing: -0.02em; }
.hub-top span { font-size: 15px; color: var(--l-text-3); }
.say { display: flex; align-items: center; gap: 12px; font: 600 var(--s2)/1 var(--display); letter-spacing: -0.02em; transition: color .3s ease; }
.say i { width: 14px; height: 14px; border-radius: 50%; background: currentColor; box-shadow: 0 0 16px currentColor; }
.why { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 15px; color: var(--l-text-2); }
.why span::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; background: var(--c, var(--l-text-3)); }
.plat-row { display: flex; align-items: center; gap: 18px; padding: 18px 22px; border-radius: 18px; background: rgba(255,255,255,.035); transition: background-color .2s, transform .2s, box-shadow .2s; cursor: default; }
.plat-row:hover { background: rgba(10,108,255,.12); box-shadow: inset 0 0 0 1.5px rgba(141,186,255,.5); transform: translateX(6px); }
.plat { flex: none; padding: 4px 10px; border-radius: 7px; font-size: 15px; font-weight: 700; }
.plat-row b { display: block; font-size: var(--s1); font-weight: 600; }
.plat-row div span { font-size: 15px; color: var(--l-text-3); }
.plat-row em { margin-left: auto; font-style: normal; font-size: 14px; font-weight: 600; color: var(--l-ok); text-align: right; }
.shelf { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; align-items: end; padding-top: 12px; }
.shelf button { padding: 0; border: 0; background: none; border-radius: 12px; cursor: pointer; transition: transform .25s ease; }
.shelf img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 12px; opacity: .6; background: var(--night-3); outline: 3px solid transparent; outline-offset: 3px; transition: opacity .25s, outline-color .25s, box-shadow .25s; }
.shelf button.on { transform: translateY(-10px); }
.shelf button.on img { opacity: 1; outline-color: #fff; box-shadow: 0 0 36px rgba(141,186,255,.55); }
.shelf-cap { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; }
.shelf-cap .k { font: 500 var(--s-1)/1.3 var(--mono); letter-spacing: .12em; color: var(--l-blue); }
.trl { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 18px; border-radius: 999px; border: 0; background: rgba(255,255,255,.08); color: var(--l-text); font: 600 15px/1 var(--body); cursor: pointer; white-space: nowrap; }
.trl:hover { background: var(--l-text); color: var(--night); }
.trl svg { width: 14px; height: 14px; }
.pad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pad span { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 16px; background: rgba(255,255,255,.035); color: #dfe4ef; transition: background-color .15s, transform .15s, box-shadow .15s; }
.pad span:hover, .pad span.hit { background: rgba(10,108,255,.16); box-shadow: inset 0 0 0 1.5px rgba(141,186,255,.55); transform: scale(1.02); }
.pad .k { flex: none; min-width: 40px; height: 40px; padding: 0 10px; border-radius: 999px; display: grid; place-items: center; color: var(--night); font: 700 14px/1 var(--body); }
.pad kbd { margin-left: auto; padding: 4px 8px; border-radius: 6px; background: rgba(255,255,255,.1); color: var(--l-text-2); font: 500 12px/1.2 var(--mono); }
.pad-say { min-height: 1.4em; font: 500 var(--s-1)/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--l-blue); }

/* ── 5 · AzrakOS ── */
.os { background: var(--night-2); color: var(--l-text); }
/* Even halves: the headline needs the room, and the TV still reads large. */
.os-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s6); align-items: center; padding-block: var(--s7) var(--s5); }
/* One step smaller than the other titles: its column is the narrow side of the golden split. */
.os h2 { margin-top: var(--s0); font-size: clamp(var(--s4), 4.2vw, var(--s5)); line-height: 1; }
.os h2 span { color: var(--quiet); }
.os .intro { margin-top: var(--s1); font-size: var(--s1); line-height: 1.5; color: var(--l-text-2); }
.tv { padding: 8px; border-radius: 20px; background: #1a2033; box-shadow: 0 50px 120px rgba(0,0,0,.5); }
.tvs { color: var(--l-text); aspect-ratio: 16 / 10; container-type: inline-size; border-radius: 14px; padding: 7cqw; background: radial-gradient(120% 90% at 70% 20%, #16306a, #05070f 70%); display: flex; flex-direction: column; gap: 4.4cqw; }
.tvs .h { display: flex; align-items: center; gap: 2cqw; font: 600 4.2cqw/1.1 var(--display); }
.tvs .h img { width: 6cqw; height: 6cqw; }
.tvs .opts { display: flex; flex-direction: column; gap: 1.6cqw; }
.tvs .opts button { display: flex; justify-content: space-between; align-items: center; gap: 2cqw; padding: 2.4cqw 3.2cqw; border-radius: 2.4cqw; border: 0; background: rgba(255,255,255,.07); color: var(--l-text-2); font: 500 3cqw/1.2 var(--body); text-align: left; cursor: pointer; transition: background-color .15s, color .15s; }
.tvs .opts button.on { background: var(--l-text); color: var(--night); font-weight: 600; }
.tvs .opts button:focus-visible { outline: none; }
.tvs .f { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 2cqw; font-size: 2.7cqw; color: #9ba6c0; }
.tvs .f b { padding: 1.6cqw 4cqw; border-radius: 99cqw; background: var(--blue); color: #fff; white-space: nowrap; }
.how { padding: var(--s3) 0 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); border-top: 1px solid rgba(255,255,255,.1); }
.how li { transition: transform .25s ease; }
.how li:hover { transform: translateY(-4px); }
.how .n { font: 500 13px/1 var(--mono); color: var(--l-blue); }
.how h3 { margin: 12px 0 8px; font: 600 var(--s1)/1.2 var(--display); letter-spacing: -0.015em; }
.how p { font-size: 15px; line-height: 1.55; color: var(--l-text-3); }
.how a { color: var(--l-blue); }
.os-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding-block: var(--s5) var(--s7); }
.panel { padding: var(--s3); border-radius: var(--s2); background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.panel h3 { margin-bottom: 10px; font: 600 var(--s2)/1.15 var(--display); letter-spacing: -0.02em; }
.panel p { line-height: 1.6; color: var(--l-text-2); }
.set { margin-top: 22px; display: flex; flex-direction: column; gap: 8px; }
.set button { display: flex; justify-content: space-between; gap: 12px; padding: 14px 18px; border-radius: 14px; border: 0; background: rgba(255,255,255,.05); color: var(--l-text); font: 600 var(--s0)/1.2 var(--body); text-align: left; cursor: pointer; transition: background-color .15s, color .15s; }
.set button em { font-style: normal; font-weight: 400; color: var(--l-text-3); }
.set button:hover, .set button.on { background: var(--l-text); color: var(--night); }
.set button:hover em, .set button.on em { color: #3d4457; }
.boot-menu { margin-top: 22px; padding: 14px; border-radius: 14px; background: var(--night); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); display: flex; flex-direction: column; gap: 6px; }
.boot-menu button { padding: 12px 14px; border-radius: 8px; border: 0; background: none; color: var(--l-text-3); font: 500 14px/1 var(--mono); text-align: left; cursor: pointer; }
.boot-menu button.on { background: var(--l-text); color: var(--night); }
.boot-say { margin-top: 12px; min-height: 1.5em; font-size: 14px; color: var(--l-blue); }
.need { padding: 0; list-style: none; }
.need li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-top: 1px solid rgba(255,255,255,.08); font-size: 15px; }
.need li:first-child { border-top: 0; }
.need b { font-weight: 600; }
.need span { color: var(--l-text-2); line-height: 1.5; }

/* ── 6 · Which one ── */
.which { padding-block: var(--s7); }
.which h2 { text-align: center; font-size: clamp(var(--s3), 4vw, var(--s4)); line-height: 1.05; }
.compare { margin: var(--s4) auto 0; max-width: 960px; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); }
.compare [role="row"] { display: contents; }
.compare [role="row"] > * { padding: 18px 16px; border-top: 1px solid var(--line); transition: background-color .15s; }
.compare [role="row"]:hover > * { background: var(--chip); }
.compare [role="row"] > .h { border-top: 0; padding-top: 0; font: 600 var(--s1)/1.2 var(--display); background: none; }
.compare [role="row"] > .k { padding-left: 0; font-weight: 500; }
.compare .v { color: var(--ink-2); }
.compare .v.yes { color: var(--ink); font-weight: 600; }
.compare [role="row"] > .go { padding-top: 24px; background: none; }
.compare .v::before { display: none; }
@media (max-width: 680px) {
  .compare { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 12px; }
  .compare .h, .compare .blank { display: none; }
  .compare [role="row"] > .k { grid-column: 1 / -1; padding: 20px 0 6px; border-top: 1px solid var(--line); }
  .compare [role="row"] > .v, .compare [role="row"] > .go { border-top: 0; padding: 0 0 4px; }
  .compare .v::before { display: block; content: attr(data-for); margin-bottom: 2px; font: 500 11px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
  .compare [role="row"] > .go { padding-top: 24px; }
  .compare .go .btn { width: 100%; }
}

/* ── 7 · FAQ ── */
.faq { max-width: 820px; padding-block: 0 var(--s7); }
.faq h2 { margin-bottom: var(--s3); font-size: clamp(var(--s3), 4vw, var(--s4)); line-height: 1.05; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding-block: 18px; font-size: var(--s1); font-weight: 600; cursor: pointer; list-style: none; transition: color .15s; }
.faq summary:hover { color: var(--accent-ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { flex: none; width: 20px; height: 20px; color: var(--ink-3); transition: transform .2s ease; }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq details p { padding: 0 40px 24px 0; color: var(--ink-2); }

/* ── 8 · Close ── */
.close { position: relative; overflow: hidden; text-align: center; padding-block: var(--s8); background: var(--night); color: var(--l-text); }
.close .wall { left: -4%; top: -420px; opacity: .38; }
.close .wall img.on, .close .wall img:hover { filter: grayscale(1) sepia(1) hue-rotate(178deg) saturate(3.2) brightness(.62) contrast(1.08); transform: none; box-shadow: none; outline-color: transparent; }
.close .fade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, #05070f 0%, rgba(5,7,15,.55) 35%, rgba(5,7,15,.55) 65%, #05070f 100%), radial-gradient(60% 80% at 50% 50%, rgba(5,7,15,.7), rgba(5,7,15,0)); }
.close h2 { position: relative; font-size: clamp(var(--s4), 7vw, var(--s7)); line-height: 1; }
.close .acts { position: relative; justify-content: center; margin-top: var(--s3); }
/* The 404 page: the close, filling the screen */
.lost { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s1); padding-inline: var(--gutter); }
.lost > :not(.wall):not(.fade) { position: relative; }
.lost .brand { margin-bottom: var(--s3); }
.lost h1 { font-size: clamp(var(--s4), 7vw, var(--s7)); line-height: 1; }
.lost h1 span { color: #6f8fc7; }
.lost p { color: var(--l-text-2); font-size: var(--s1); }
.foot { background: var(--night); color: var(--l-text-3); border-top: 1px solid rgba(255,255,255,.08); }
.foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 32px; padding-block: var(--s4); font-size: 13px; }
.foot .about { flex: 1 1 340px; max-width: 520px; display: flex; flex-direction: column; gap: 12px; }
.foot .brand { font-size: 17px; }
.foot .brand img { width: 28px; height: 28px; }
.foot .about p { line-height: 1.6; }
.foot .cols { display: flex; gap: 56px; font-size: 14px; }
.foot .cols div { display: flex; flex-direction: column; gap: 10px; }
.foot .cols span { font: 500 12px/1 var(--mono); letter-spacing: .1em; color: var(--quiet); }
.foot .cols a { color: var(--l-text); text-decoration: none; }
.foot .cols a:hover { color: var(--l-blue); }


/* ── Light mode for the parts that are the page's own (the launcher's screens stay dark) ── */
:root[data-theme="light"] .hero, :root[data-theme="light"] .close { background: var(--paper-2); color: var(--ink); }
/* The same blue as the dark wall, printed light: shadows Azrak blue, highlights near white (#azrak-light in the page). */
:root[data-theme="light"] .wall img { filter: url(#azrak-light); }
:root[data-theme="light"] .hero .wall img.on, :root[data-theme="light"] .hero .wall img:hover { filter: none; outline-color: #fff; box-shadow: 0 20px 50px rgba(10,40,110,.28); }
:root[data-theme="light"] .hero .tint { background: radial-gradient(70% 70% at 72% 45%, rgba(10,108,255,.06), rgba(239,232,220,0) 70%); }
:root[data-theme="light"] .hero .fade { background:
  linear-gradient(90deg, #efe8dc 0%, rgba(239,232,220,.95) 26%, rgba(239,232,220,.5) 44%, rgba(239,232,220,0) 62%),
  linear-gradient(180deg, rgba(239,232,220,.94) 0%, rgba(239,232,220,.6) 9%, rgba(239,232,220,0) 22%, rgba(239,232,220,0) 72%, rgba(239,232,220,.94) 90%, #f4efe6 100%); }
:root[data-theme="light"] .brand { color: var(--ink); }
:root[data-theme="light"] .links a { color: var(--ink-2); }
:root[data-theme="light"] .links a:hover { color: var(--ink); }
:root[data-theme="light"] .links a::after { background: var(--ink); }
:root[data-theme="light"] .gh, :root[data-theme="light"] .theme { background: rgba(251,248,242,.8); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(10,12,18,.12), 0 1px 2px rgba(10,12,18,.06); }
:root[data-theme="light"] .gh:hover, :root[data-theme="light"] .theme:hover { color: var(--ink); background: var(--card); box-shadow: inset 0 0 0 1px rgba(10,12,18,.24); }
:root[data-theme="light"] .copy h1 span { color: #3a62c0; }
:root[data-theme="light"] .copy p { color: var(--ink-2); }
:root[data-theme="light"] .hero .pill, :root[data-theme="light"] .close .pill, :root[data-theme="light"] .os .pill { background: var(--ink); color: #fff; }
:root[data-theme="light"] .hero .pill:hover, :root[data-theme="light"] .close .pill:hover, :root[data-theme="light"] .os .pill:hover { background: #2a3358; color: #fff; }
:root[data-theme="light"] .ghost { color: var(--ink); }
:root[data-theme="light"] .ghost:hover { color: var(--accent-ink); }
:root[data-theme="light"] .marks a { color: #7a8194; }
:root[data-theme="light"] .marks a:hover { color: var(--ink); }
:root[data-theme="light"] .close .fade { background: linear-gradient(180deg, #f4efe6 0%, rgba(239,232,220,.6) 35%, rgba(239,232,220,.6) 65%, #f4efe6 100%), radial-gradient(60% 80% at 50% 50%, rgba(239,232,220,.8), rgba(239,232,220,0)); }
:root[data-theme="light"] .close .wall img.on, :root[data-theme="light"] .close .wall img:hover { filter: url(#azrak-light); }
:root[data-theme="light"] .os { background: var(--paper-3); color: var(--ink); }
:root[data-theme="light"] .os .eyebrow, :root[data-theme="light"] .how .n, :root[data-theme="light"] .how a, :root[data-theme="light"] .boot-say { color: var(--accent-ink); }
:root[data-theme="light"] .os .intro, :root[data-theme="light"] .panel p, :root[data-theme="light"] .need span { color: var(--ink-2); }
:root[data-theme="light"] .how { border-top-color: rgba(10,12,18,.1); }
:root[data-theme="light"] .how p { color: var(--ink-3); }
:root[data-theme="light"] .panel { background: var(--card); box-shadow: 0 1px 2px rgba(10,12,18,.05), inset 0 0 0 1px rgba(10,12,18,.06); }
:root[data-theme="light"] .need li { border-top-color: rgba(10,12,18,.08); }
:root[data-theme="light"] .set button { background: var(--chip); color: var(--ink); }
:root[data-theme="light"] .set button em { color: var(--ink-3); }
:root[data-theme="light"] .set button:hover, :root[data-theme="light"] .set button.on { background: var(--ink); color: #fff; }
:root[data-theme="light"] .set button:hover em, :root[data-theme="light"] .set button.on em { color: #c3cbdd; }
:root[data-theme="light"] .tv { background: var(--night-3); box-shadow: 0 40px 90px rgba(28,42,82,.25); }
:root[data-theme="light"] .tvs { background: radial-gradient(120% 90% at 70% 20%, #2f56a8, #1c2a52 70%); }
:root[data-theme="light"] .vis { box-shadow: 0 18px 40px rgba(28,42,82,.18), inset 0 0 0 1px rgba(255,255,255,.08); }
:root[data-theme="light"] .bezel { box-shadow: 0 40px 100px rgba(28,42,82,.25), inset 0 0 0 1px rgba(255,255,255,.08); }
:root[data-theme="light"] .cmd, :root[data-theme="light"] .boot-menu { background: var(--night-2); }
:root[data-theme="light"] .foot { background: var(--page); color: var(--ink-3); border-top-color: var(--line); }
:root[data-theme="light"] .foot .cols a { color: var(--ink); }
:root[data-theme="light"] .foot .cols a:hover { color: var(--accent-ink); }
:root[data-theme="light"] .lost { background: var(--paper-2); }
:root[data-theme="light"] .lost p { color: var(--ink-2); }
:root[data-theme="light"] .lost h1 span { color: #3f68b8; }

/* Phones and narrow windows: the same order, one column */
@media (max-width: 900px) {
  .links { display: none; }
  .wall { left: 8%; opacity: .7; }
  .row, .row.flip, .os-head, .os-grid, .how { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .row.flip .txt { order: 0; }
  .marks { gap: 12px 24px; }
  .marks a { font-size: var(--s0); }
}
@media (max-width: 560px) {
  .gh span { display: none; }
  .gh { padding: 0 13px; }
  .pad { grid-template-columns: minmax(0, 1fr); }
  .shelf { gap: 8px; }
  .need li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .built .lab { display: none; }
}

/* Big screens (2000 px and wider): everything one step up the same scale, in a wider column.
   (Last, so it wins over the rules above.) */
@media (min-width: 2000px) {
  :root { --wide: 1640px; --s-1: 16px; --s0: 20px; --s1: 26px; --s2: 33px; --s3: 42px; --s4: 53px; --s5: 68px; --s6: 87px; --s7: 110px; --s8: 140px; }
  .copy { max-width: 1040px; }
  .copy p { max-width: 660px; }
  .txt p { max-width: 560px; }
  .faq { max-width: 1040px; }
  .compare { max-width: 1240px; }
}