:root {
  color-scheme: light;
  --bg: #fafbfc;
  --surface: #fff;
  --surface-alt: #eef2f8;
  --ink: #172136;
  --muted: #5c687b;
  --line: #dbe1eb;
  --accent: #315fdb;
  --accent-soft: #e3ebff;
  --gold: #f7c943;
  --stage: #dce9ff;
  --shadow: 0 18px 50px #1b356817;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #0e131e;
    --surface: #171e2a;
    --surface-alt: #202a38;
    --ink: #f3f6fb;
    --muted: #b0bdd0;
    --line: #303b4b;
    --accent: #88aaff;
    --accent-soft: #243a67;
    --gold: #f7c943;
    --stage: #25385b;
    --shadow: 0 30px 70px #0005;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e131e; --surface: #171e2a; --surface-alt: #202a38;
  --ink: #f3f6fb; --muted: #b0bdd0; --line: #303b4b;
  --accent: #88aaff; --accent-soft: #243a67; --gold: #f7c943;
  --stage: #25385b; --shadow: 0 30px 70px #0005;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f7f8fb; --surface: #fff; --surface-alt: #eef2f8;
  --ink: #172136; --muted: #5c687b; --line: #dbe1eb;
  --accent: #315fdb; --accent-soft: #e3ebff; --gold: #f7c943;
  --stage: #dce9ff; --shadow: 0 30px 70px #1b356820;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--bg); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button { font: inherit; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
h1, h2 { letter-spacing: -.055em; }
.shell { width: min(100% - 3rem, 1190px); margin-inline: auto; }
.skip-link { position: absolute; left: 1rem; top: -5rem; z-index: 100; padding: .7rem 1rem; color: #fff; background: #172136; border-radius: .6rem; }
.skip-link:focus { top: 1rem; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.site-header { position: relative; z-index: 10; border-bottom: 1px solid var(--line); background: var(--surface); }
.header-inner { display: flex; align-items: center; min-height: 4.75rem; gap: 2rem; }
.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; font-size: 1.12rem; font-weight: 800; white-space: nowrap; letter-spacing: -.035em; }
.brand img { border-radius: .6rem; }
.header-links { display: flex; align-items: center; gap: 1.4rem; margin-left: auto; }
.header-links a { color: var(--muted); text-decoration: none; font-size: .83rem; font-weight: 670; white-space: nowrap; }
.header-links a:hover, .footer a:hover, .privacy a:hover, .community a:hover { color: var(--accent); }
.header-links span { font-size: .75rem; }
.header-controls { display: flex; align-items: center; gap: .45rem; }
.theme-toggle, .language-menu summary { display: inline-flex; align-items: center; justify-content: center; min-height: 2.3rem; padding: .3rem .55rem; border: 1px solid var(--line); border-radius: .55rem; color: var(--ink); background: var(--bg); cursor: pointer; }
.theme-toggle { min-width: 2.3rem; font-size: 1.1rem; }
.language-menu { position: relative; font-size: .8rem; font-weight: 700; }
.language-menu summary { gap: .35rem; list-style: none; white-space: nowrap; }
.language-menu summary::-webkit-details-marker { display: none; }
.language-options { position: absolute; top: calc(100% + .5rem); right: 0; display: grid; min-width: 12rem; padding: .35rem; border: 1px solid var(--line); border-radius: .7rem; background: var(--surface); box-shadow: var(--shadow); }
.language-options a { padding: .55rem .65rem; border-radius: .4rem; text-decoration: none; font-size: .82rem; }
.language-options a:hover, .language-options a[aria-current] { background: var(--accent-soft); }
.hero { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 5%; padding-block: 5.5rem 6rem; }
.eyebrow, .feature-index, .section-label { color: var(--accent); text-transform: uppercase; font-size: .72rem; font-weight: 820; letter-spacing: .15em; }
.eyebrow { margin-bottom: 1.4rem; }
.hero h1 { max-width: 13ch; font-size: clamp(3.5rem, 5.5vw, 5.8rem); line-height: 1.04; font-weight: 790; letter-spacing: -.035em; word-spacing: .04em; }
.lede { max-width: 34rem; margin-top: 1.5rem; color: var(--muted); font-size: clamp(1.05rem, 1.55vw, 1.22rem); line-height: 1.65; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.primary-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 2.4rem; padding: .95rem 1.2rem; border-radius: .65rem; color: #fff; background: #315fdb; text-decoration: none; font-size: .9rem; font-weight: 760; box-shadow: 0 9px 20px #315fdb33; transition: transform .15s ease, background .15s ease; }
.primary-link:hover { transform: translateY(-2px); background: #244ec2; }
.release-note { color: var(--muted); font-size: .8rem; font-weight: 700; }
.requirements { margin-top: 1.25rem; color: var(--muted); font-size: .77rem; }
.stage { position: relative; padding: 3.8rem 1.6rem 2.8rem; border: 1px solid var(--line); border-radius: 1.5rem; background: var(--surface-alt); overflow: hidden; }
.stage-label { position: absolute; top: 1.25rem; left: 1.6rem; color: #223a61; font-size: .7rem; font-weight: 760; }
.app-window { position: relative; overflow: hidden; border: 1px solid #3b485d; border-radius: .85rem; background: #1c2028; color: #e9edf5; box-shadow: 0 20px 45px #16253d36; }
.window-bar { display: flex; align-items: center; justify-content: space-between; height: 3.1rem; padding: 0 1rem; border-bottom: 1px solid #ffffff20; background: #252a32; font-size: .8rem; }
.traffic { display: inline-flex; gap: .35rem; }
.traffic i { display: block; width: .54rem; height: .54rem; border-radius: 50%; background: #fb6e67; }
.traffic i:nth-child(2) { background: #f7bf51; }
.traffic i:nth-child(3) { background: #58c96f; }
.window-actions { color: #a9b6c8; }
.app-layout { display: grid; grid-template-columns: 31% 69%; min-height: 16rem; }
.app-sidebar { display: flex; flex-direction: column; gap: .2rem; padding: 1rem .5rem; border-right: 1px solid #ffffff1c; background: #262b31; color: #c8d0d9; font-size: .64rem; }
.app-sidebar > span { display: flex; justify-content: space-between; padding: .45rem .5rem; border-radius: .35rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.app-sidebar b { font-weight: 650; }
.app-sidebar .mock-section { display: block; margin-top: .2rem; padding-block: .25rem; color: #8f9ba9; font-size: .58rem; font-weight: 720; text-transform: uppercase; }
.app-sidebar .mock-section-two { margin-top: .65rem; }
.app-sidebar .mock-selected { background: #3d4754; color: #fff; }
.app-table { min-width: 0; padding: .9rem .75rem; }
.app-table-top { display: flex; justify-content: space-between; align-items: center; padding: 0 .5rem .8rem; }
.app-table-top strong { font-size: .85rem; }
.app-table-top small { color: #9ba8b9; font-size: .58rem; }
.app-row { display: grid; grid-template-columns: 1.4fr .5fr .65fr; gap: .4rem; align-items: center; min-height: 3.1rem; padding: .3rem .5rem; border-top: 1px solid #ffffff17; font-size: .65rem; }
.app-row.app-head { min-height: 1.9rem; color: #a8b1c0; font-size: .55rem; }
.mock-app { display: inline-flex; align-items: center; gap: .45rem; min-width: 0; }
.mock-app b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile { display: inline-grid; flex: none; place-items: center; width: 1.55rem; height: 1.55rem; border-radius: .36rem; color: #fff; font-style: normal; font-size: .64rem; font-weight: 800; }
.tile-blue { background: #3582dc; } .tile-purple { background: #8768db; } .tile-green { background: #47a67a; } .tile-dark { background: #31343f; }
.pill { display: inline-block; padding: .3rem .35rem; border-radius: .35rem; white-space: nowrap; font-size: .6rem; font-weight: 760; }
.pill.update { color: #98c8ff; background: #2b4360; }
.features { padding-block: 1rem 6rem; }
.feature { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: 9%; padding-block: 5.6rem; border-top: 1px solid var(--line); }
.feature.reverse { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.feature.reverse .feature-copy { grid-column: 2; grid-row: 1; }
.feature.reverse .visual { grid-column: 1; grid-row: 1; }
.feature h2, .community h2, .languages h2, .privacy h2, .closing h2 { margin-top: .8rem; font-size: clamp(2.2rem, 3.3vw, 3.65rem); line-height: 1.1; font-weight: 760; }
.feature-copy p { max-width: 31rem; margin-top: 1.25rem; color: var(--muted); font-size: 1.02rem; line-height: 1.7; }
.visual { position: relative; min-height: 19rem; padding: 2.1rem; border: 1px solid var(--line); border-radius: 1.3rem; background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.visual-stamp { position: absolute; right: .8rem; bottom: .55rem; color: var(--muted); font-size: .6rem; font-weight: 650; }
.visual-menubar .visual-stamp, .visual-terminal .visual-stamp { color: #657a99; }
.visual-kicker { display: block; margin-bottom: 1.2rem; color: var(--muted); font-size: .75rem; font-weight: 730; text-transform: uppercase; letter-spacing: .08em; }
.visual-inventory { background: var(--surface); }
.overview-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.overview-metrics div { display: flex; flex-direction: column; gap: .3rem; padding: 1rem; border-radius: .7rem; background: var(--surface-alt); }
.overview-metrics strong { font-size: 2rem; letter-spacing: -.06em; }
.overview-metrics span { color: var(--muted); font-size: .72rem; }
.source-list { display: grid; gap: .3rem; margin-top: 1.1rem; }
.source-list > span { display: flex; justify-content: space-between; gap: 1rem; padding: .65rem 0; border-bottom: 1px solid var(--line); font-size: .84rem; font-weight: 730; }
.source-list b { color: var(--muted); font-size: .75rem; font-weight: 550; text-align: right; }
.visual-menubar { min-height: 20rem; background: #dce7fc; color: #232c38; }
.menu-top { display: flex; justify-content: space-between; margin: -2.1rem -2.1rem 1.6rem; padding: .7rem 1rem; background: #263745; color: #eff5fb; font-size: .76rem; font-weight: 750; }
.menu-top > span:first-child { padding: .28rem .55rem; border-radius: 2rem; background: #475f67; }
.menu-popover { display: grid; width: min(100%, 18rem); margin-inline: auto; padding: 1rem; border: 1px solid #8a97a499; border-radius: .9rem; background: #31363be8; color: #f4f6f8; box-shadow: 0 1rem 2rem #273c6170; }
.menu-popover small { margin-bottom: .5rem; color: #adb9c2; font-size: .7rem; font-weight: 750; }
.menu-popover > span { display: flex; align-items: center; gap: .5rem; padding: .43rem .2rem; font-size: .82rem; }
.menu-popover > span b { margin-left: auto; color: #bfc8d0; font-size: .68rem; font-weight: 600; }
.menu-popover hr { width: 100%; border: 0; border-top: 1px solid #ffffff30; }
.visual-tree { padding-block: 2rem; }
.tree-row, .game-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.9rem; padding: .45rem .6rem; border-bottom: 1px solid var(--line); font-size: .9rem; }
.tree-row span, .game-row span { display: inline-flex; align-items: center; gap: .55rem; }
.tree-row b, .game-row b { color: var(--muted); font-size: .72rem; font-weight: 550; text-align: right; }
.tree-row.parent { background: var(--surface-alt); border-radius: .5rem; font-weight: 750; }
.tree-row.child { margin-left: 1.6rem; color: var(--muted); }
.visual-games { background: var(--surface-alt); }
.game-heading { margin-bottom: .7rem; font-weight: 800; }
.game-row { background: var(--surface); padding-inline: .9rem; }
.game-row:first-of-type { border-radius: .6rem .6rem 0 0; }
.game-row:last-of-type { border-radius: 0 0 .6rem .6rem; border-bottom: 0; }
.visual-terminal { padding: 0; background: #171e2a; color: #e6edf7; }
.terminal-top { display: flex; align-items: center; justify-content: center; height: 2.6rem; border-bottom: 1px solid #ffffff20; position: relative; color: #9aa9bd; font-size: .72rem; }
.terminal-top .traffic { position: absolute; left: 1rem; }
.visual-terminal pre { margin: 0; padding: 2rem; overflow-x: auto; font: .89rem/2.1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.prompt { color: #93b0ff; } .dim { color: #98a9bf; } .green { color: #7ee7af; }
.community { padding-block: 6.5rem; background: #162845; color: #f8fbff; }
.community-grid { display: grid; grid-template-columns: 1fr .75fr; gap: 10%; align-items: center; }
.community .section-label { color: #9fbcff; }
.community p { max-width: 37rem; margin-top: 1.3rem; color: #c5d2e5; line-height: 1.7; }
.community a, .privacy a { display: inline-flex; gap: .5rem; margin-top: 1.35rem; color: #a8c2ff; font-weight: 730; text-underline-offset: .3rem; }
.report-card { display: grid; gap: .75rem; padding: 2rem; border: 1px solid #6681a0; border-radius: 1rem; background: #253e5e; box-shadow: 0 25px 50px #050c2033; }
.report-icon { display: grid; place-items: center; width: 3.1rem; height: 3.1rem; border-radius: .6rem; background: #90aeef; color: #20335b; font: 700 1rem ui-monospace, monospace; }
.report-card strong { font: 700 .98rem ui-monospace, monospace; }
.report-card > span:not(.report-icon), .report-card small { color: #c6d4e7; }
.report-arrow { font-size: 2rem; color: #f7c943; }
.languages { display: grid; grid-template-columns: .9fr 1.1fr; gap: 10%; align-items: center; padding-block: 6.5rem; }
.languages p { max-width: 30rem; margin-top: 1.25rem; color: var(--muted); line-height: 1.7; }
.language-grid { display: flex; flex-wrap: wrap; gap: .65rem; }
.language-grid > span { display: inline-flex; gap: .4rem; padding: .75rem .95rem; border: 1px solid var(--line); border-radius: 2rem; background: var(--surface); font-size: .86rem; font-weight: 680; white-space: nowrap; }
.privacy { padding-block: 5.8rem; background: var(--surface-alt); }
.privacy-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 10%; }
.privacy p { max-width: 37rem; color: var(--muted); line-height: 1.7; }
.privacy p + p { margin-top: .9rem; }
.privacy a { color: var(--accent); }
.closing { display: flex; justify-content: space-between; align-items: end; gap: 2rem; padding-block: 6rem; }
.closing p { max-width: 38rem; margin-top: 1rem; color: var(--muted); line-height: 1.7; }
.closing .primary-link { flex: none; }
.footer { border-top: 1px solid var(--line); background: var(--surface); }
.footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 2rem; min-height: 5.5rem; color: var(--muted); font-size: .78rem; }
.footer-inner > div { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.footer a { text-decoration: none; }
.locale-entry-inner { display: grid; justify-items: start; gap: 1.2rem; padding-block: 5rem; }
.locale-entry h1 { font-size: clamp(2.8rem, 8vw, 5rem); }
.locale-entry p { max-width: 40rem; color: var(--muted); line-height: 1.6; }
.locale-entry nav { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1rem; }
.locale-entry nav a { padding: .65rem 1rem; border: 1px solid var(--line); border-radius: .6rem; background: var(--surface); text-decoration: none; }
.locale-entry nav a:hover { border-color: var(--accent); }
@media (max-width: 1040px) {
  .header-inner { gap: 1rem; }
  .header-links { gap: .7rem; }
  .header-links a { font-size: .73rem; }
  .hero { gap: 2rem; }
  .hero h1 { font-size: clamp(3.2rem, 5.4vw, 5rem); }
}
@media (max-width: 760px) {
  .shell { width: min(100% - 2rem, 1190px); }
  .header-inner { flex-wrap: wrap; padding-block: .7rem; }
  .header-links { order: 3; width: 100%; justify-content: space-between; margin-left: 0; padding-top: .6rem; border-top: 1px solid var(--line); }
  .header-controls { margin-left: auto; }
  .hero, .feature, .feature.reverse, .community-grid, .languages, .privacy-grid { grid-template-columns: 1fr; gap: 2.4rem; }
  .hero { padding-block: 4.5rem 4rem; }
  .hero h1 { font-size: clamp(3.15rem, 10vw, 5rem); }
  .hero-stage { width: min(100%, 38rem); margin-inline: auto; }
  .feature, .feature.reverse { padding-block: 4rem; }
  .feature.reverse .feature-copy, .feature.reverse .visual { grid-column: 1; grid-row: auto; }
  .feature.reverse .feature-copy { grid-row: 1; }
  .feature.reverse .visual { grid-row: 2; }
  .features { padding-bottom: 2rem; }
  .community, .languages, .privacy { padding-block: 4.5rem; }
  .closing { flex-direction: column; align-items: flex-start; padding-block: 4.5rem; }
  .footer-inner { flex-direction: column; align-items: flex-start; padding-block: 1.6rem; }
}
@media (max-width: 480px) {
  .brand { font-size: 1rem; }
  .brand img { width: 32px; height: 32px; }
  .language-name { display: none; }
  .header-links { gap: .4rem; overflow-x: auto; }
  .header-links a { font-size: .67rem; }
  .hero h1 { font-size: clamp(2.7rem, 12vw, 3.8rem); }
  .stage { padding: 3.2rem .5rem 1.5rem; border-radius: .9rem; }
  .stage-label { top: .9rem; left: .8rem; font-size: .61rem; }
  .app-window { transform: none; }
  .app-sidebar { font-size: .5rem; padding-inline: .25rem; }
  .app-sidebar > span { padding-inline: .2rem; }
  .app-row { font-size: .55rem; }
  .app-row.app-head { font-size: .48rem; }
  .tile { width: 1.3rem; height: 1.3rem; }
  .visual { padding: 1.2rem; min-height: 16rem; }
  .visual-menubar { padding: 1.2rem; }
  .menu-top { margin: -1.2rem -1.2rem 1rem; }
  .overview-metrics { gap: .3rem; }
  .overview-metrics div { padding: .65rem; }
  .overview-metrics strong { font-size: 1.5rem; }
  .tree-row, .game-row { font-size: .76rem; }
  .tree-row b, .game-row b { font-size: .62rem; }
  .visual-terminal { padding: 0; }
  .visual-terminal pre { padding: 1rem; font-size: .68rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .primary-link { transition: none; } }