:root {
  color-scheme: dark;
  --night: #11131e; --panel: #191e2a; --ink: #f2ede3; --muted: #b4b7c2;
  --line: #424653; --cyan: #86dbd1; --amber: #ffbd74;
  --mono: "Cascadia Mono", Consolas, "Microsoft YaHei", "Nirmala UI", monospace;
  --display: Bahnschrift, "Arial Narrow", "Segoe UI", "Microsoft YaHei", "Nirmala UI", sans-serif;
  font: 16px/1.5 "Segoe UI", "Microsoft YaHei", "Nirmala UI", sans-serif;
  background: var(--night); color: var(--ink);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body, figure, h1, p { margin: 0; }
body { min-height: 100vh; background: radial-gradient(ellipse at 92% 24%,#202535 0,transparent 55%),var(--night); }
.page { width: min(92%, 1510px); margin-inline: auto; }
.masthead, .brand, .release, .actions, .instrument-head, .views, figcaption, .credit { display: flex; align-items: center; }
.masthead { position: relative; z-index: 2; min-height: 74px; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line); }
.brand { gap: 9px; font: 700 30px/1 var(--display); letter-spacing: -.04em; }
.brand img { width: 32px; height: 32px; padding: 3px; border: 1px solid #506569; background: #14272b; border-radius: 2px; }
.edition { margin-left: 8px; font: 600 .66rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .065em; color: var(--amber); border-left: 1px solid var(--line); padding-left: 13px; }
.flag-definitions { position: absolute; pointer-events: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.language { position: relative; font: .84rem/1.4 var(--mono); }
.language summary, .language-options button { display: flex; align-items: center; gap: 7px; padding: 8px; color: var(--ink); font: inherit; cursor: pointer; }
.language summary { list-style: none; background: var(--panel); border: 1px solid var(--line); border-radius: 2px; }
.language summary::-webkit-details-marker { display: none; }
.language summary::after { content: ""; width: 6px; height: 6px; margin-inline: 4px; border: solid currentColor; border-width: 0 1px 1px 0; transform: translateY(-2px) rotate(45deg); }
.language[open] summary::after { transform: translateY(2px) rotate(225deg); }
.language summary:hover { border-color: var(--cyan); }
.flag { width: 18px; height: 18px; flex: none; }
.language-options { position: absolute; right: 0; top: calc(100% + 5px); min-width: 10rem; padding: 4px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 8px 18px #080a12; }
.language-options button { width: 100%; border: 0; background: transparent; text-align: start; }
.language-options button:hover, .language-options button:focus-visible { background: #303744; }
.language-options button[aria-current="true"]::after { content: "✓"; margin-left: auto; color: var(--cyan); }
a { color: var(--cyan); text-underline-offset: .25em; }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.hero { display: grid; grid-template-columns: minmax(0,.79fr) minmax(0,1.25fr); gap: clamp(28px,4.2vw,80px); align-items: center; padding-block: clamp(18px,2.5vh,48px); }
.release { gap: .65em; flex-wrap: wrap; color: var(--cyan); font: .72rem/1.5 var(--mono); letter-spacing: .04em; }
.prompt-mark { width: 1.55em; height: 1em; background: linear-gradient(var(--cyan),var(--cyan)) right bottom / 35% 1.5px no-repeat; }
.prompt-mark::before { content: ""; display: block; width: .48em; height: .48em; border: solid var(--cyan); border-width: 2px 2px 0 0; transform: translateY(.17em) rotate(45deg); }
.platform { border-left: 1px solid var(--line); padding-inline-start: .8em; color: var(--muted); }
h1 { margin: clamp(15px,2.3vh,25px) 0 14px; font: 680 clamp(3.15rem,4.65vw,5.6rem)/.99 var(--display); letter-spacing: -.055em; }
h1 span, h1 em { display: block; }
h1 em { margin-top: .12em; color: var(--amber); font: normal 500 .76em/1.13 var(--mono); letter-spacing: -.073em; }
:lang(hi) h1, :lang(hi) h1 em { line-height: 1.25; letter-spacing: normal; }
.description { max-width: 43ch; color: #d5d6dc; font-size: clamp(1rem,1.16vw,1.16rem); line-height: 1.58; }
.benchmark { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0,.79fr) minmax(0,1.25fr); align-items: center; gap: 12px clamp(28px,4.2vw,80px); padding-block: 20px 0; border-top: 1px solid var(--line); }
.benchmark > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.benchmark span { color: var(--muted); font: .78rem/1.45 var(--mono); }
.benchmark strong { color: var(--cyan); font: 600 clamp(1.85rem,3vw,2.8rem)/1.15 var(--display); }
.benchmark p { max-width: 73ch; color: #d5d6dc; font-size: .92rem; line-height: 1.55; }
.actions { gap: 13px 22px; flex-wrap: wrap; margin-top: 22px; }
.button { display: inline-flex; align-items: center; gap: .6em; background: var(--amber); color: #23190f; padding: 12px 16px; border: 1px solid var(--amber); box-shadow: 3px 3px 0 #745336; border-radius: 1px; text-decoration: none; font-weight: 700; }
.button:hover { background: #ffd29b; color: #23190f; }
#download::before { content: ""; width: 13px; height: 16px; flex-shrink: 0; background: currentColor; clip-path: polygon(43% 0,57% 0,57% 51%,80% 29%,91% 40%,50% 80%,9% 40%,20% 29%,43% 51%,43% 0,0 0,0 92%,100% 92%,100% 100%,0 100%,0 0); }
.action { font-size: .92rem; font-weight: 600; }
.policy { margin-top: 15px; max-width: 53ch; color: var(--muted); font-size: .82rem; }
.instrument { min-width: 0; width: 100%; max-width: min(100%, 113vh); justify-self: end; background: #1b202b; border: 1px solid #58606c; box-shadow: 5px 5px 0 #0b0d15; }
.instrument-head { gap: 8px 12px; justify-content: space-between; flex-wrap: wrap; min-height: 45px; padding: 7px 12px; border-bottom: 1px solid var(--line); font: .76rem/1.3 var(--mono); }
.file { display: inline-flex; align-items: center; gap: 8px; }
.file i { display: inline-block; width: 7px; height: 7px; background: var(--amber); transform: rotate(45deg); }
.views { gap: 3px; position: relative; }
.views button { border: 1px solid transparent; padding: 5px 9px; background: none; font: inherit; color: var(--muted); cursor: pointer; }
.views button:hover { color: white; border-color: var(--line); }
.views button[aria-pressed="true"] { color: var(--cyan); background: #203335; border-color: #567a7a; }
.plate { position: relative; padding: 10px 12px 11px; background-color: #202530; background-image: repeating-linear-gradient(90deg,#747b87 0 1px,transparent 1px 9px); background-size: 100% 3px; background-position: bottom; background-repeat: no-repeat; }
.capture { position: relative; display: block; aspect-ratio: 1460/920; overflow: hidden; background: #101219; cursor: zoom-in; }
.capture img { display: block; width: 100%; height: 100%; }
/* Preserve the complete native window, including its controls and status bar. */
#comparison { aspect-ratio: 1462 / 1260; }
#comparison img { object-fit: contain; }
/* The circle and its sight share the same source pixel, (650, 440) on the native capture. */
.optics { display: none; position: absolute; inset: 0; pointer-events: none; }
.instrument[data-view="detail"] .optics { display: block; }
.optics::before { content: ""; position: absolute; left: 44.52%; right: 36%; top: 47.83%; height: 1px; background: var(--amber); box-shadow: 0 1px 1px #19120b; }
.optics i { position: absolute; left: 44.52%; top: 47.83%; width: 4.5%; aspect-ratio: 1; transform: translate(-50%,-50%); border: 1px solid var(--amber); border-radius: 50%; box-shadow: inset 0 0 0 1px #171719; }
.optics::after { content: ""; position: absolute; width: 21%; aspect-ratio: 1; right: 28%; top: 47.83%; transform: translateY(-50%); border-radius: 50%; box-sizing: border-box;
  background: #20232c url("assets/prints-editor.png") 44.022% 47.495% / 1200% auto no-repeat;
  border: 3px solid #20232c; box-shadow: 0 0 0 1px var(--amber),0 0 0 5px #161923,0 0 0 6px #82818a,3px 6px 16px #0a0a10; }
figcaption { justify-content: space-between; gap: 6px 15px; flex-wrap: wrap; padding: 10px 13px; font: .72rem/1.4 var(--mono); }
figcaption strong { color: var(--ink); font-weight: 500; }
.directions { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.directions svg { width: clamp(115px,14vw,230px); height: 13px; fill: none; stroke: var(--amber); stroke-width: 1.7; stroke-linecap: round; }
.directions .centers { stroke-width: 2.8; }
.credit { grid-column: 2; gap: 6px 20px; flex-wrap: wrap; }
.byline { font-size: .9rem; }
.byline a { font: inherit; }
.origin-story { display: grid; grid-template-columns: minmax(0,.79fr) minmax(0,1.25fr); gap: 10px clamp(28px,4.2vw,80px); padding-block: 28px 32px; border-top: 1px solid var(--line); }
.origin-story h2 { margin: 2px 0 0; max-width: 23ch; color: var(--amber); font: 500 1.08rem/1.55 var(--mono); }
.origin-story p { max-width: 72ch; color: #d5d6dc; font-size: .95rem; line-height: 1.75; }
.credit a { font: .78rem/1.5 var(--mono); flex-shrink: 0; }
.site-contact { flex-basis: 100%; color: var(--muted); font-size: .84rem; }
.site-contact summary { width: fit-content; cursor: pointer; }
.site-contact p { margin-block: .6em; font-size: inherit; }
@media (max-width: 900px) and (min-width: 761px) { .hero { gap: 22px; grid-template-columns: minmax(0,.9fr) minmax(0,1.15fr); } h1 { font-size: 2.9rem; } }
@media (max-width: 760px) {
  .page { width: min(91%, 630px); }
  .masthead { min-height: 61px; }
  .hero { grid-template-columns: 1fr; gap: 25px; padding-block: 28px; }
  h1 { font-size: clamp(3rem,8.6vw,4.5rem); }
  .actions { margin-top: 18px; }
  .instrument { max-width: none; }
  .credit { grid-column: 1; align-items: baseline; gap: 5px 12px; }
  .benchmark { grid-template-columns: 1fr; gap: 8px; }
  .benchmark > div { justify-content: start; gap: 14px; }
  .origin-story { grid-template-columns: 1fr; gap: 14px; padding-block: 26px; }
}
@media (max-width: 430px) {
  .brand { font-size: 23px; gap: 6px; } .brand img { width: 24px; height: 24px; }
  .edition { margin-left: 0; padding-left: 6px; font-size: .61rem; max-width: 9ch; }
  .instrument-head { padding: 7px; } .views button { padding: 6px; }
  .plate { padding: 6px 6px 7px; } figcaption { padding-inline: 8px; }
  .directions svg { width: 80px; }
}
@media (max-width: 380px) {
  .brand { display: grid; grid-template-columns: auto 1fr; gap: 1px 6px; }
  .brand img { grid-row: span 2; }
  .edition { grid-column: 2; border: 0; padding: 0; max-width: none; }
}