/* ESO OS website — graphite + chrome, like the ESO-Metal desktop theme. No external fonts or requests. */
:root {
  --bg: #0b0d10; --bg2: #101318; --card: #14181e; --card2: #181d24; --line: #242a33; --line2: #2f3642;
  --text: #e6ebf0; --muted: #98a2ad; --dim: #6c7580; --acc: #8fb3d9; --acc2: #b9d2ec; --red: #e06c75; --green: #98c379;
  --r: 16px; --r-sm: 10px; --wrap: 1180px;
  --chrome: linear-gradient(180deg, #ffffff 0%, #dfe5ec 38%, #9ea8b3 62%, #e9eef3 100%);
  --metal: linear-gradient(180deg, #f4f7fa 0%, #cfd7df 48%, #a9b4bf 52%, #dde4ea 100%);
  --font: "Inter", "Segoe UI", system-ui, -apple-system, "Noto Sans", "Noto Sans Arabic", "Segoe UI Arabic", Tahoma, sans-serif;
  --mono: "JetBrains Mono", "Cascadia Code", ui-monospace, "DejaVu Sans Mono", monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.65 var(--font); -webkit-font-smoothing: antialiased; }
[dir="rtl"] body { line-height: 1.8; }
img { max-width: 100%; height: auto; }
a { color: var(--acc2); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; letter-spacing: -.01em; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { letter-spacing: 0; line-height: 1.4; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); font-weight: 750; }
h3 { font-size: 1.12rem; font-weight: 650; }
p { margin: 0 0 1em; }
code { font-family: var(--mono); font-size: .88em; background: #0e1116; border: 1px solid var(--line); border-radius: 6px; padding: .1em .4em; overflow-wrap: anywhere; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }
.narrow { max-width: 820px; }
.center { text-align: center; }
.muted { color: var(--muted); }
.small { font-size: .9rem; }
.lead { font-size: 1.14rem; color: var(--muted); max-width: 62ch; }
.center .lead, .shead .lead { margin-inline: auto; }
.chrome { background: var(--chrome); background-size: 100% 1.2em; -webkit-background-clip: text; background-clip: text; color: transparent; }
[dir="rtl"] .chrome { background-size: 100% 1.4em; }
.guide .chrome, .shead .chrome { background-size: 100% 1.2em; }
.skip { position: absolute; inset-inline-start: -999px; top: 8px; background: var(--acc); color: #000; padding: 8px 14px; border-radius: 8px; z-index: 99; }
.skip:focus { inset-inline-start: 8px; }

/* icons */
.ic { width: 20px; height: 20px; flex: none; }
.ic-sm { width: 16px; height: 16px; }
.ic-lg { width: 30px; height: 30px; color: var(--acc); }
.ic-xl { width: 110px; height: 110px; color: var(--acc); opacity: .9; }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 9px; padding: 13px 22px; border-radius: 999px; font-weight: 650; font-size: 1rem;
  border: 1px solid transparent; cursor: pointer; transition: transform .12s ease, box-shadow .2s ease, background .2s ease; text-decoration: none !important; }
.btn:active { transform: translateY(1px); }
.btn-chrome { background: var(--metal); color: #0f1215; border-color: #eef2f6; box-shadow: 0 1px 0 #fff inset, 0 8px 28px rgba(143, 179, 217, .18); }
.btn-chrome:hover { box-shadow: 0 1px 0 #fff inset, 0 10px 36px rgba(143, 179, 217, .34); }
.btn-ghost { background: rgba(255, 255, 255, .03); color: var(--text); border-color: var(--line2); }
.btn-ghost:hover { background: rgba(255, 255, 255, .07); }
.btn-sm { padding: 8px 15px; font-size: .92rem; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 16px; }
.center .ctas { justify-content: center; }

/* header */
.top { position: sticky; top: 0; z-index: 50; background: rgba(11, 13, 16, .78); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid rgba(255, 255, 255, .05); }
.bar { display: flex; align-items: center; gap: 20px; height: 66px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-weight: 800; font-size: 1.12rem; text-decoration: none !important; letter-spacing: .02em; }
.nav { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; }
.nav > a:not(.btn) { color: var(--muted); padding: 8px 12px; border-radius: 8px; font-size: .95rem; text-decoration: none; }
.nav > a:not(.btn):hover, .nav > a[aria-current] { color: var(--text); background: rgba(255, 255, 255, .05); }
.nav .btn { margin-inline-start: 8px; }
.navt, .navb { display: none; }
.langs { position: relative; }
.langs summary { list-style: none; display: flex; align-items: center; gap: 6px; cursor: pointer; color: var(--muted); padding: 8px 10px; border-radius: 8px; font-size: .92rem; }
.langs summary::-webkit-details-marker { display: none; }
.langs summary:hover { color: var(--text); background: rgba(255, 255, 255, .05); }
.langs > div { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); background: var(--card2); border: 1px solid var(--line2); border-radius: 12px; padding: 6px; min-width: 150px; box-shadow: 0 16px 40px rgba(0, 0, 0, .5); }
.langs > div a { display: block; padding: 8px 12px; border-radius: 8px; color: var(--text); text-decoration: none; }
.langs > div a:hover, .langs > div a[aria-current] { background: rgba(143, 179, 217, .12); }

/* hero */
.hero { position: relative; overflow: hidden; padding: 70px 0 30px; }
.hero::before { content: ""; position: absolute; inset: -30% -10% auto; height: 900px; pointer-events: none;
  background: radial-gradient(600px 380px at 75% 30%, rgba(143, 179, 217, .16), transparent 70%), radial-gradient(500px 300px at 15% 10%, rgba(255, 255, 255, .06), transparent 70%); }
.hgrid { position: relative; display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: center; }
.badge { display: inline-block; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line2); background: rgba(255, 255, 255, .03); color: var(--acc2); font-size: .88rem; font-weight: 600; }
.hshot { position: relative; }
.frame { border-radius: 14px; padding: 6px; background: linear-gradient(180deg, #3a414b, #171b21); box-shadow: 0 40px 90px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .06); transform: perspective(1400px) rotateY(-7deg) rotateX(3deg); }
[dir="rtl"] .frame { transform: perspective(1400px) rotateY(7deg) rotateX(3deg); }
.frame img { display: block; border-radius: 9px; }
.planet { position: absolute; width: 170px; inset-inline-start: -70px; bottom: -40px; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .7)); animation: float 7s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-12px) rotate(-3deg); } }
.stats { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 60px; }
.stat { background: linear-gradient(180deg, var(--card2), var(--card)); border: 1px solid var(--line); border-radius: var(--r); padding: 20px 22px; }
.stat strong { display: block; font-size: 1.9rem; font-weight: 800; background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat span { color: var(--muted); font-size: .92rem; }

/* sections + cards */
.sec { padding: 80px 0; }
.sec-alt { background: linear-gradient(180deg, transparent, var(--bg2) 12%, var(--bg2) 88%, transparent); }
.shead { text-align: center; margin-bottom: 44px; }
.phero { padding: 72px 0 30px; text-align: center; background: radial-gradient(600px 240px at 50% 0, rgba(143, 179, 217, .12), transparent 70%); }
.phero .lead { margin-inline: auto; }
.card { background: linear-gradient(180deg, var(--card2), var(--card)); border: 1px solid var(--line); border-radius: var(--r); padding: 26px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.fcard { transition: border-color .2s, transform .2s; }
.fcard:hover { border-color: var(--line2); transform: translateY(-2px); }
.fcard h3 { margin-top: 14px; }
.fcard p { color: var(--muted); margin: 0 0 12px; }
.ustep { padding: 8px 4px; }
.ustep h3 { margin-top: 12px; }
.ustep p { color: var(--muted); }
.note { display: flex; gap: 10px; align-items: flex-start; margin: 26px auto 0; max-width: 760px; padding: 14px 18px; border: 1px dashed var(--line2); border-radius: 12px; color: var(--muted); }
.note .ic { color: var(--acc); margin-top: 3px; }
.cta-final { background: radial-gradient(500px 260px at 50% 40%, rgba(143, 179, 217, .12), transparent 70%); }
.cta-final img { margin-bottom: 12px; }

/* screenshots: CSS-only tabs */
.shots { text-align: center; }
.stab { position: absolute; opacity: 0; pointer-events: none; }
.slabels { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; margin-bottom: 26px; }
.slabels label { padding: 8px 16px; border-radius: 999px; cursor: pointer; color: var(--muted); font-size: .94rem; }
.slabels label:hover { color: var(--text); }
.spane { display: none; margin: 0; }
.spane img { border-radius: 12px; border: 1px solid var(--line2); box-shadow: 0 30px 70px rgba(0, 0, 0, .55); }
.spane figcaption { margin-top: 14px; color: var(--muted); }
.shot-small { max-height: 620px; width: auto; }
#s-start:checked ~ .spanes .sp-start, #s-quick:checked ~ .spanes .sp-quick, #s-nano:checked ~ .spanes .sp-nano,
#s-gamebar:checked ~ .spanes .sp-gamebar, #s-settings:checked ~ .spanes .sp-settings { display: block; }
#s-start:checked ~ .slabels label[for="s-start"], #s-quick:checked ~ .slabels label[for="s-quick"], #s-nano:checked ~ .slabels label[for="s-nano"],
#s-gamebar:checked ~ .slabels label[for="s-gamebar"], #s-settings:checked ~ .slabels label[for="s-settings"] { background: var(--metal); color: #0f1215; font-weight: 650; }
.stab:focus-visible ~ .slabels { outline: 2px solid var(--acc); outline-offset: 3px; }

/* features page */
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding: 60px 0; border-bottom: 1px solid var(--line); }
.frow:last-child { border-bottom: 0; }
.frow.rev .ftext { order: 2; }
.fmedia { text-align: center; }
.fmedia img { border-radius: 12px; border: 1px solid var(--line2); box-shadow: 0 30px 70px rgba(0, 0, 0, .5); }
.ficon { display: grid; place-items: center; min-height: 260px; border-radius: var(--r); border: 1px solid var(--line); background: radial-gradient(circle at 50% 40%, rgba(143, 179, 217, .12), transparent 65%), var(--card); }
.ticks { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; }
.ticks .ic { color: var(--green); margin-top: 5px; }

/* download */
.dlcard { max-width: 820px; margin: 20px auto 0; padding: 32px; border-color: var(--line2); box-shadow: 0 30px 80px rgba(0, 0, 0, .4); }
.dlhead { display: flex; gap: 18px; align-items: center; }
.dlhead h2 { margin: 0; }
.dlhead p { margin: 0; }
.dlmeta { display: flex; flex-wrap: wrap; gap: 28px; margin: 22px 0 8px; }
.dlmeta dt { color: var(--dim); font-size: .85rem; }
.dlmeta dd { margin: 0; font-weight: 650; }
.sha { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #0e1116; }
.sha span { color: var(--dim); font-size: .85rem; flex: none; }
.sha code { border: 0; background: none; padding: 0; flex: 1; direction: ltr; }
.copy { flex: none; background: none; border: 1px solid var(--line2); color: var(--muted); border-radius: 8px; padding: 6px; cursor: pointer; display: grid; }
.copy:hover { color: var(--text); }
.copy.ok { color: var(--green); border-color: var(--green); }
.steps { list-style: none; padding: 0; margin: 0; }
.step { position: relative; }
.step .num { position: absolute; inset-inline-end: 22px; top: 18px; font-size: 2.6rem; font-weight: 800; color: rgba(255, 255, 255, .06); }
.step h3 { margin-top: 14px; }
.step p { color: var(--muted); margin: 0; }
.two { display: grid; grid-template-columns: 1fr 1.3fr; gap: 16px; }
.two h2 { font-size: 1.35rem; }
.code { background: #0a0c0f; border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; overflow-x: auto; font: .86rem/1.7 var(--mono); color: #c9d4de; text-align: left; }
.code code { background: none; border: 0; padding: 0; font-size: inherit; overflow-wrap: normal; white-space: pre; }
.older { padding-inline-start: 20px; color: var(--muted); }
.older li { margin: 6px 0; }

/* docs */
.docs { display: grid; grid-template-columns: 250px 1fr; gap: 40px; padding-bottom: 60px; }
.toc { position: sticky; top: 86px; align-self: start; max-height: calc(100vh - 110px); overflow: auto; font-size: .92rem; }
.toc ol { list-style: none; padding: 0; margin: 0; }
.toc a { display: block; padding: 5px 10px; border-radius: 8px; color: var(--muted); border-inline-start: 2px solid var(--line); }
.toc a:hover { color: var(--text); background: rgba(255, 255, 255, .04); text-decoration: none; }
.prose { min-width: 0; }
.prose section h2 { display: flex; gap: 10px; align-items: center; font-size: 1.4rem; }
.prose section h2 .ic { color: var(--acc); }
.guide { margin-top: 30px; text-align: left; }
.guide h1 { font-size: 2rem; }
.guide h2 { font-size: 1.55rem; margin-top: 2em; padding-top: 1em; border-top: 1px solid var(--line); scroll-margin-top: 80px; }
.guide h3 { margin-top: 1.6em; scroll-margin-top: 80px; }
.guide ul, .guide ol { padding-left: 1.4em; }
.guide li { margin: .3em 0; }
.guide table { border-collapse: collapse; width: 100%; margin: 1em 0; font-size: .94rem; display: block; overflow-x: auto; }
.guide th, .guide td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.guide th { background: var(--card2); }
.guide pre { background: #0a0c0f; border: 1px solid var(--line); border-radius: 10px; padding: 14px; overflow-x: auto; }
.guide pre code { background: none; border: 0; padding: 0; overflow-wrap: normal; }
.guide blockquote { margin: 1em 0; padding: 10px 16px; border-left: 3px solid var(--acc); background: var(--card); border-radius: 0 10px 10px 0; color: var(--muted); }
.plain { white-space: pre-wrap; font-family: var(--font); }
#updates { scroll-margin-top: 90px; }

/* changelog + news */
.timeline { padding-bottom: 60px; }
.rel, .post { margin-bottom: 16px; scroll-margin-top: 86px; }
.rel header { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px; }
.rel h2 { font-size: 1.35rem; margin: 0; }
.rel h2 a { color: var(--text); }
.rel time, .post time { color: var(--dim); font-size: .9rem; margin-inline-start: auto; }
.rel p, .post p { color: var(--muted); margin: 0; }
.post h2 { font-size: 1.35rem; margin: 6px 0 10px; }
.post a { display: inline-block; margin-top: 10px; }
.tag { display: inline-block; font-size: .78rem; font-weight: 650; padding: 3px 10px; border-radius: 999px; background: rgba(143, 179, 217, .14); color: var(--acc2); }
.tag-red { background: rgba(224, 108, 117, .16); color: #f0a0a7; }
.tag-dim { background: rgba(255, 255, 255, .06); color: var(--muted); }
.tbl { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
.tbl th, .tbl td { padding: 10px; border-bottom: 1px solid var(--line); text-align: start; }

/* footer */
.foot { border-top: 1px solid var(--line); background: #090b0d; padding: 50px 0 30px; margin-top: 40px; }
.fgrid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 30px; }
.flinks { display: grid; gap: 6px; align-content: start; }
.flinks a { color: var(--muted); font-size: .94rem; }
.flinks a:hover { color: var(--text); }
.fsmall { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--line); font-size: .86rem; }

/* responsive */
@media (max-width: 1020px) {
  .grid4 { grid-template-columns: repeat(2, 1fr); }
  .hgrid { grid-template-columns: 1fr; gap: 40px; }
  .frame, [dir="rtl"] .frame { transform: none; }
  .planet { width: 110px; inset-inline-start: auto; inset-inline-end: -10px; bottom: -34px; }
  .docs { grid-template-columns: 1fr; }
  .toc { position: static; max-height: none; }
  .toc ol { columns: 2; }
}
@media (max-width: 900px) {
  .navb { display: grid; place-items: center; margin-inline-start: auto; width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--line2); cursor: pointer; color: var(--text); }
  .nav { display: none; position: absolute; inset-inline: 0; top: 66px; flex-direction: column; align-items: stretch; gap: 2px; padding: 12px 16px 18px; background: rgba(11, 13, 16, .97); border-bottom: 1px solid var(--line); }
  .navt:checked ~ .nav { display: flex; }
  .nav > a:not(.btn) { padding: 12px; }
  .nav .btn { margin: 8px 0 0; justify-content: center; }
  .langs > div { position: static; box-shadow: none; margin-top: 4px; }
  .grid3 { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .frow, .two { grid-template-columns: 1fr; gap: 28px; }
  .frow.rev .ftext { order: 0; }
  .fgrid { grid-template-columns: 1fr 1fr; }
  .fgrid > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .wrap { padding-inline: 18px; }
  .grid3, .grid4 { grid-template-columns: 1fr; }
  .hero { padding-top: 40px; }
  .stat strong { font-size: 1.5rem; }
  .sec { padding: 56px 0; }
  .btn { width: 100%; justify-content: center; }
  .ctas .btn-sm { width: auto; }
  .dlcard { padding: 22px; }
  .toc ol { columns: 1; }
  .slabels { border-radius: 16px; }
}

/* "3.0" marker for features that arrive with ESO OS 3.0 */
.tag30 { display: inline-block; vertical-align: middle; margin-inline-start: .5em; padding: .12em .5em; border-radius: 999px;
  font-size: .62rem; font-weight: 700; letter-spacing: .04em; line-height: 1.5; color: #0b0d10;
  background: linear-gradient(180deg, #e9eef4, #9fb0c2); -webkit-text-fill-color: #0b0d10; }
h2 .tag30 { font-size: .9rem; }
.note30 { margin-top: 1.4rem; align-items: center; }
.note30 .tag30 { margin-inline-start: 0; flex: none; }