:root {
  color-scheme: dark;
  --alloy-black: #03070d;
  --alloy-ink: #edf7ff;
  --alloy-muted: #8ca1b7;
  --alloy-panel: #07111d;
  --alloy-panel-2: #0b1928;
  --alloy-blue: #1687ff;
  --alloy-cyan: #85d7ff;
  --alloy-steel: #7890a8;
  --alloy-line: rgb(98 166 225 / 25%);
  --alloy-line-bright: rgb(133 215 255 / 52%);
  --alloy-shadow: 0 28px 90px rgb(0 0 0 / 55%), 0 0 48px rgb(22 135 255 / 8%);
  --rail: 17rem;
  --max: 92rem;
}
* { box-sizing: border-box; }
html { background: var(--alloy-black); color: var(--alloy-ink); scroll-behavior: smooth; }
body { min-width: 320px; min-height: 100vh; margin: 0; padding-left: var(--rail); overflow-x: hidden; background: radial-gradient(circle at 72% 8%, rgb(22 135 255 / 14%), transparent 31rem), linear-gradient(145deg, #02050a, #06101b 60%, #02070d); font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.6; }
body::before { position: fixed; z-index: -1; inset: 0; content: ""; pointer-events: none; background-image: linear-gradient(rgb(133 215 255 / 3%) 1px, transparent 1px), linear-gradient(90deg, rgb(133 215 255 / 3%) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(90deg, transparent, #000 25%, #000); }
a { color: inherit; }
img { display: block; max-width: 100%; }
button, input { font: inherit; }
:focus-visible { outline: 3px solid var(--alloy-cyan); outline-offset: 3px; }
.shell { width: min(var(--max), calc(100% - 3rem)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 100; top: .75rem; left: .75rem; translate: 0 -180%; padding: .7rem 1rem; background: var(--alloy-cyan); color: #00101c; font-weight: 900; }
.skip-link:focus { translate: 0; }
.site-header { position: fixed; z-index: 30; inset: 0 auto 0 0; width: var(--rail); border-right: 1px solid var(--alloy-line); background: rgb(3 7 13 / 91%); backdrop-filter: blur(22px) saturate(135%); }
.header-inner { display: flex; height: 100%; flex-direction: column; gap: 1.5rem; padding: 2rem 1.35rem; }
.brand-group { display: grid; gap: .65rem; }
.brand { display: flex; align-items: center; gap: .8rem; text-decoration: none; }
.brand-dot { width: 2.5rem; height: 2.5rem; border: 1px solid var(--alloy-line-bright); border-radius: 50%; background: conic-gradient(from 225deg, #06101c, var(--alloy-cyan), #284c73, var(--alloy-blue), #06101c); box-shadow: inset 0 0 0 7px #07111d, 0 0 32px rgb(22 135 255 / 25%); }
.brand-name { font-weight: 850; letter-spacing: -.055em; line-height: 1; }
.brand-name em { display: block; color: var(--alloy-cyan); font-style: normal; }
.ai-pattern-badge { width: fit-content; padding: .22rem .55rem; border: 1px solid var(--alloy-line); color: var(--alloy-steel); font: 750 .64rem/1.4 ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; }
.header-search, .hero-search, .search-form { display: flex; gap: .45rem; }
.header-search { display: grid; }
.header-search input, .hero-search input, .search-form input { min-width: 0; border: 1px solid var(--alloy-line); background: #06101b; color: var(--alloy-ink); padding: .72rem .8rem; }
.header-search button, .hero-search button, .search-form button { border: 1px solid var(--alloy-line-bright); background: #0c2137; color: var(--alloy-cyan); padding: .7rem .9rem; cursor: pointer; }
.site-nav { display: grid; gap: .25rem; }
.site-nav a { position: relative; padding: .72rem .8rem .72rem 1.65rem; border-left: 1px solid var(--alloy-line); color: var(--alloy-muted); text-decoration: none; font-size: .82rem; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.site-nav a::before { position: absolute; left: -.25rem; top: 50%; width: .42rem; height: .42rem; border: 1px solid var(--alloy-steel); border-radius: 50%; content: ""; translate: 0 -50%; background: var(--alloy-black); }
.site-nav a:hover, .site-nav a:focus-visible { border-color: var(--alloy-cyan); color: var(--alloy-cyan); background: linear-gradient(90deg, rgb(22 135 255 / 12%), transparent); }
.nav-toggle { display: none; }
main { min-height: 75vh; }
h1, h2, h3 { margin-top: 0; font-weight: 720; letter-spacing: -.055em; line-height: .98; text-wrap: balance; }
.eyebrow { color: var(--alloy-cyan); font: 800 .7rem/1.5 ui-monospace, monospace; letter-spacing: .2em; text-transform: uppercase; }
.observatory-stage { position: relative; display: grid; min-height: 100vh; grid-template-columns: minmax(0, 1.05fr) minmax(25rem, .95fr); gap: clamp(2rem, 6vw, 7rem); align-items: center; padding: clamp(4rem, 9vw, 9rem); overflow: hidden; }
.observatory-stage::before { position: absolute; inset: 8% 5%; content: ""; pointer-events: none; border: 1px solid var(--alloy-line); background: linear-gradient(112deg, transparent 32%, rgb(133 215 255 / 8%) 48%, transparent 63%); transform: skewX(-7deg); }
.observatory-copy { position: relative; z-index: 2; }
.observatory-copy h1 { max-width: 10ch; margin-bottom: 1.5rem; font-size: clamp(3.2rem, 7vw, 8.2rem); }
.hero-lead, .lede { max-width: 47rem; color: var(--alloy-muted); font-size: clamp(1rem, 1.5vw, 1.25rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin: 2rem 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: .75rem 1.1rem; border: 1px solid var(--alloy-line-bright); color: var(--alloy-cyan); background: rgb(7 17 29 / 75%); text-decoration: none; font-weight: 800; cursor: pointer; }
.btn-primary { color: #001425; background: linear-gradient(135deg, #8edcff, #1687ff 55%, #0d4b8d); box-shadow: 0 14px 44px rgb(22 135 255 / 24%), inset 0 1px rgb(255 255 255 / 55%); }
.btn:hover { translate: 0 -2px; filter: brightness(1.08); }
.observatory-readout { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); max-width: 42rem; margin-top: 3rem; border-block: 1px solid var(--alloy-line); }
.observatory-readout div { padding: 1rem; border-right: 1px solid var(--alloy-line); }
.observatory-readout div:last-child { border: 0; }
.observatory-readout dt { color: var(--alloy-steel); font: .65rem ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; }
.observatory-readout dd { margin: .25rem 0 0; font-weight: 850; }
.alloy-aperture { position: relative; aspect-ratio: 1; width: min(42vw, 38rem); margin-inline: auto; border: 1px solid var(--alloy-line-bright); border-radius: 50%; background: radial-gradient(circle, #02060b 0 19%, transparent 20%), conic-gradient(from 20deg, #061221, #1687ff, #8bdcff, #173a5d, #061221); box-shadow: inset 0 0 0 2rem #07111d, inset 0 0 7rem #000, 0 0 8rem rgb(22 135 255 / 18%); }
.alloy-aperture::after { position: absolute; inset: 8%; border: 1px solid rgb(255 255 255 / 22%); border-radius: 50%; content: ""; background: repeating-conic-gradient(transparent 0 11deg, rgb(2 8 15 / 75%) 12deg 17deg); }
.alloy-aperture span { position: absolute; z-index: 2; inset: 19%; border: 1px solid var(--alloy-line); border-radius: 50%; }
.alloy-aperture span:nth-child(2) { inset: 29%; }
.alloy-aperture span:nth-child(3) { inset: 39%; }
.alloy-aperture strong { position: absolute; z-index: 3; inset: 0; display: grid; place-content: center; color: var(--alloy-cyan); font: 900 clamp(1.4rem, 4vw, 3.4rem)/.8 ui-monospace, monospace; letter-spacing: -.12em; text-align: center; text-shadow: 0 0 28px var(--alloy-blue); }
.calibration-empty { width: min(62rem, calc(100% - 3rem)); margin: -7rem auto 7rem; padding: clamp(2rem, 5vw, 4rem); border: 1px solid var(--alloy-line); background: linear-gradient(135deg, rgb(9 24 39 / 88%), rgb(3 8 15 / 95%)); box-shadow: var(--alloy-shadow); }
.calibration-empty h2 { max-width: 15ch; font-size: clamp(2rem, 5vw, 4.5rem); }
.calibration-empty p:not(.eyebrow) { max-width: 45rem; color: var(--alloy-muted); }
.band { padding: clamp(3.5rem, 7vw, 7rem) 0; }
.band-top { padding-top: clamp(4rem, 9vw, 8rem); }
.band-alt { border-block: 1px solid var(--alloy-line); background: rgb(8 20 33 / 45%); }
.band-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; border-bottom: 1px solid var(--alloy-line); }
.band-head h2 { font-size: clamp(2rem, 5vw, 4.5rem); }
.band-more { color: var(--alloy-cyan); }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; }
.card { position: relative; overflow: hidden; border: 1px solid var(--alloy-line); background: linear-gradient(145deg, #0b1928, #050b12); box-shadow: 0 18px 50px rgb(0 0 0 / 28%); }
.card::after { position: absolute; inset: -50%; content: ""; pointer-events: none; background: linear-gradient(112deg, transparent 38%, rgb(133 215 255 / 16%) 49%, transparent 60%); translate: -80% 0; transition: translate .8s ease; }
.card:hover::after { translate: 80% 0; }
.card-media { position: relative; aspect-ratio: 1; overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: scale .4s ease; }
.card:hover img { scale: 1.035; }
.card-badge { position: absolute; right: .7rem; top: .7rem; padding: .3rem .55rem; border: 1px solid var(--alloy-line-bright); background: rgb(3 7 13 / 82%); color: var(--alloy-cyan); font: .65rem ui-monospace, monospace; text-transform: uppercase; }
.card-body { padding: 1rem; }
.card-title { font-size: 1.1rem; line-height: 1.15; }
.card-title a, .card-download { text-decoration: none; }
.card-download { color: var(--alloy-cyan); font-size: .8rem; font-weight: 800; }
.tag-chips, .hub-grid, .pager-list { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.tag-chips a { display: block; padding: .25rem .45rem; border: 1px solid var(--alloy-line); color: var(--alloy-muted); font-size: .67rem; text-decoration: none; }
.hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.hub a { display: grid; padding: 1rem; border: 1px solid var(--alloy-line); text-decoration: none; }
.hub-count, .empty { color: var(--alloy-muted); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; list-style: none; color: var(--alloy-steel); font-size: .8rem; }
.crumbs li + li::before { content: "/"; margin-right: .5rem; }
.pager { display: flex; justify-content: center; gap: 1rem; margin-top: 2rem; }
.pager a, .pager-current { display: block; padding: .5rem .75rem; border: 1px solid var(--alloy-line); }
.prose, .faq-article, .faq-index-card, .detail-side, .detail-frame, .empty-state { border: 1px solid var(--alloy-line); background: rgb(7 17 29 / 78%); box-shadow: var(--alloy-shadow); }
.prose, .faq-article { max-width: 58rem; padding: clamp(1.5rem, 4vw, 3.5rem); }
.prose h1, .faq-article h1, .band-top h1 { max-width: 16ch; font-size: clamp(2.5rem, 6vw, 6rem); }
.prose p, .faq-article p, .faq-article li { color: #b3c4d4; }
.faq-index-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.faq-index-card { padding: 1.25rem; }
.faq-index-card a { color: var(--alloy-cyan); }
.detail-grid { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(20rem,.8fr); gap: 2rem; }
.detail-frame { position: relative; overflow: hidden; }
.detail-frame img { width: 100%; height: auto; object-fit: contain; display: block }
.detail-side { padding: 1.5rem; }
.specs > div { display: flex; justify-content: space-between; padding: .65rem 0; border-bottom: 1px solid var(--alloy-line); }
.paypal-modal, .seamless-checker { width: min(68rem, calc(100vw - 2rem)); max-width: none; padding: 0; border: 1px solid var(--alloy-line-bright); background: #07111d; color: var(--alloy-ink); box-shadow: var(--alloy-shadow); }
.paypal-modal::backdrop, .seamless-checker::backdrop { background: rgb(0 3 8 / 86%); backdrop-filter: blur(12px); }
.paypal-modal-card, .seamless-checker-shell { padding: 1.25rem; }
.seamless-checker-stage { height: min(68vh, 44rem); background-repeat: repeat; cursor: grab; }
.checker-orbit { display: grid; min-height: 100vh; grid-template-columns: minmax(18rem,.55fr) minmax(0,1.45fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; padding: clamp(3rem, 7vw, 7rem); }
.checker-orbit-intro h1 { max-width: 9ch; font-size: clamp(3rem, 6vw, 7rem); }
.checker-orbit-intro p { color: var(--alloy-muted); }
.checker-upload { display: inline-flex; margin-top: 1rem; padding: .85rem 1.1rem; border: 1px solid var(--alloy-line-bright); background: linear-gradient(135deg, #8edcff, var(--alloy-blue)); color: #001425; font-weight: 900; cursor: pointer; }
.checker-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.checker-privacy { font: .72rem ui-monospace, monospace; }
.checker-console { padding: 1rem; border: 1px solid var(--alloy-line-bright); background: linear-gradient(145deg, #0a1928, #030810); box-shadow: var(--alloy-shadow); }
.checker-viewport { position: relative; min-height: min(62vh, 45rem); overflow: hidden; border: 1px solid var(--alloy-line); background: #02060b; cursor: grab; touch-action: none; }
.checker-viewport canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.checker-viewport [data-checker-heatmap] { pointer-events: none; }
.checker-viewport p { position: absolute; z-index: 2; left: 50%; top: 50%; width: 80%; color: var(--alloy-steel); text-align: center; translate: -50% -50%; }
.checker-toolbar, .checker-export, .checker-sliders { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .8rem; }
.checker-toolbar button, .checker-export button { padding: .58rem .75rem; border: 1px solid var(--alloy-line); background: #07111d; color: var(--alloy-muted); cursor: pointer; }
.checker-toolbar button[aria-pressed="true"] { border-color: var(--alloy-cyan); color: var(--alloy-cyan); }
.checker-sliders label { display: flex; align-items: center; gap: .5rem; color: var(--alloy-muted); font-size: .76rem; }
.checker-metrics { display: grid; grid-template-columns: repeat(4,1fr); margin: 1rem 0 0; border: 1px solid var(--alloy-line); }
.checker-metrics div { padding: .75rem; border-right: 1px solid var(--alloy-line); }
.checker-metrics div:last-child { border: 0; }
.checker-metrics dt { color: var(--alloy-steel); font: .62rem ui-monospace, monospace; text-transform: uppercase; }
.checker-metrics dd { margin: .3rem 0 0; font-weight: 850; }
.checker-metrics [data-verdict="clean"] { color: #6fffc1; }
.checker-metrics [data-verdict="inspect"] { color: #ffd16a; }
.checker-metrics [data-verdict="seam-likely"] { color: #ff6f91; }
.checker-advisory { color: var(--alloy-steel); font-size: .72rem; }
.site-footer { border-top: 1px solid var(--alloy-line); background: #02060b; }
.footer-inner { padding: 3rem 0; }
.footer-lead { max-width: 32rem; color: var(--alloy-muted); }
.footer-cols { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; margin: 2rem 0; }
.footer-cols > div { display: grid; align-content: start; gap: .45rem; }
.footer-cols span { color: var(--alloy-cyan); font: .7rem ui-monospace, monospace; text-transform: uppercase; }
.footer-cols a { color: var(--alloy-muted); font-size: .8rem; }
.footer-base { display: flex; justify-content: space-between; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--alloy-line); color: var(--alloy-steel); font-size: .72rem; }
@media (max-width: 1100px) {
  .observatory-stage { grid-template-columns: 1fr; }
  .alloy-aperture { width: min(70vw, 34rem); }
  .checker-orbit { grid-template-columns: 1fr; }
  .checker-orbit-intro h1 { max-width: 13ch; }
  .grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 900px) {
  body { padding: 4.8rem 0 5.2rem; }
  .site-header { inset: 0 0 auto; width: 100%; height: 4.8rem; border: 0; border-bottom: 1px solid var(--alloy-line); }
  .header-inner { display: flex; width: calc(100% - 1.5rem); height: auto; flex-direction: row; align-items: center; padding: .75rem 0; }
  .brand-group { margin-right: auto; }
  .brand-dot { width: 2rem; height: 2rem; }
  .ai-pattern-badge, .header-search, .nav-toggle { display: none; }
  .site-nav { position: fixed; z-index: 40; inset: auto 0 0; display: flex; gap: 0; justify-content: space-around; padding: .6rem .4rem calc(.6rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--alloy-line); background: rgb(3 7 13 / 95%); backdrop-filter: blur(18px); overflow-x: auto; }
  .site-nav a { flex: 0 0 auto; padding: .55rem .65rem; border: 0; font-size: .62rem; }
  .site-nav a::before { display: none; }
  .observatory-stage, .checker-orbit { min-height: auto; padding: 4rem 1.25rem; }
  .calibration-empty { margin: 0 auto 4rem; }
  .detail-grid, .faq-index-grid { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 620px) {
  .shell { width: min(100% - 1.5rem, var(--max)); }
  .observatory-copy h1 { font-size: clamp(3rem, 17vw, 5.5rem); }
  .observatory-readout, .checker-metrics { grid-template-columns: 1fr 1fr; }
  .observatory-readout div:nth-child(2), .checker-metrics div:nth-child(2) { border-right: 0; }
  .grid, .hub-grid, .footer-cols { grid-template-columns: 1fr; }
  .checker-viewport { min-height: 29rem; }
  .footer-base { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}