/* aux.os site: page layout and the studio drawing only. Components come from aux.form (form/auxform.css);
   colours, type and radii are aux.form tokens throughout. */
/* aux.form's .aux / .aux-grid-bg page styles live in a cascade layer, so any unlayered reset a host adds
   (the preview host sets body background and font) beats them. Restate them unlayered for <body>. */
html { background: var(--aux-bg); }
body.aux { margin: 0; min-height: 100vh; color: var(--aux-fg); font: 400 var(--aux-text)/1.5 var(--aux-font-sans);
  font-variation-settings: 'wdth' var(--aux-sans-width); -webkit-font-smoothing: antialiased; }
body.aux-grid-bg { background: radial-gradient(circle, var(--aux-dot) 1px, transparent 1.2px) 0 0 / 24px 24px, var(--aux-bg); }
p { margin: 0; }

.skip { position: absolute; left: 16px; top: -48px; z-index: 50; }
.skip:focus { top: 10px; }

.logo { display: block; height: 13px; width: auto; color: var(--aux-fg); }
.spacer { flex: 1; }

/* ---------- header ---------- */
.top {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; display: flex; align-items: center; gap: 28px; height: 56px; padding: 0 24px;
  background: color-mix(in srgb, var(--aux-bg) 82%, transparent);
  backdrop-filter: blur(var(--aux-z2-blur)); -webkit-backdrop-filter: blur(var(--aux-z2-blur));
  border-bottom: 1px dashed var(--aux-line);
}
.top-logo { display: block; padding: 6px 0; }
.top .btn + .btn { margin-left: -16px; }

.wrap { max-width: 1320px; margin: 0 auto; padding: 0 24px; }

/* ---------- hero ---------- */
.hero { padding: 80px 0 40px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.hero-copy { display: grid; gap: 20px; justify-items: start; }
.hero-badge { margin-left: var(--aux-space-3); vertical-align: 1px; }
.lede { max-width: 62ch; color: var(--aux-fg-2); font-size: 16px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--aux-space-2); margin-top: var(--aux-space-1); }
.hero-stats { max-width: 760px; }
.hero-stats .field-hint { white-space: nowrap; }
@media (max-width: 640px) { .hero-stats .field-hint { white-space: normal; } }

/* ---------- studio (hero image) ---------- */
.studio { margin: 0 0 56px; position: relative; aspect-ratio: 1440 / 744; overflow: hidden; }
.studio-stage { position: absolute; left: 0; top: 0; width: 1440px; height: 744px; transform: scale(var(--s, 1)); transform-origin: 0 0; }
.studio-stage > * { position: absolute; }

.readout { left: 40px; top: 96px; width: 168px; display: grid; gap: 12px; }
.readout .kv dd { min-width: 6ch; text-align: right; }

.speaker { top: 384px; width: 160px; height: 320px; overflow: visible; }
.speaker-l { left: 40px; } .speaker-r { left: 1240px; }
.sp-body { fill: var(--aux-surface-2); stroke: var(--aux-tick); }
.sp-line { fill: none; stroke: var(--aux-line-2); }
.sp-fill { fill: var(--aux-fg-3); }
.sp-led { fill: var(--aux-fg-2); }

.monitor { left: 228px; top: 52px; width: 984px; height: 564px; padding: 12px; background: var(--aux-bg); border-radius: 6px; }
.screen { width: 960px; height: 540px; overflow: hidden; position: relative; border-radius: 1px; background: var(--aux-bg); }
.monitor-neck { left: 694px; top: 617px; width: 52px; height: 74px; background: var(--aux-surface-2); border: 1px solid var(--aux-line-2); border-top: 0; }
.monitor-foot { left: 600px; top: 690px; width: 240px; height: 14px; background: var(--aux-surface-2); border: 1px solid var(--aux-tick); border-radius: var(--aux-radius-lg) var(--aux-radius-lg) 0 0; }
.desk { left: 0; top: 704px; width: 1440px; height: 32px; border-top: 1px solid var(--aux-tick); border-bottom: 1px dashed var(--aux-line-2);
  background: repeating-linear-gradient(90deg, var(--aux-line) 0 1px, transparent 1px 120px); }

.iface { left: 870px; top: 652px; width: 200px; height: 52px; }
.k-body { fill: var(--aux-surface-2); stroke: var(--aux-tick); }
.k-line { fill: none; stroke: var(--aux-line-2); }
.k-meter { stroke: var(--aux-fg-2); stroke-width: 3; }
.studio svg * { vector-effect: non-scaling-stroke; }

.callout { left: var(--x); top: var(--y); display: grid; gap: 6px; }
.callout::before { content: ''; position: absolute; top: 5px; left: calc(-1 * var(--lx)); width: calc(var(--lx) - 8px); height: 1px; background: var(--aux-tick); }
.callout::after { content: ''; position: absolute; top: 3px; left: calc(-1 * var(--lx) - 2px); width: 5px; height: 5px; background: var(--aux-fg); }
.studio.is-small .callout, .studio.is-small .readout { display: none; }

/* the aux.os desktop on the screen: drawn at 1280×720 and scaled into the 960×540 screen */
.screen-ui { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; transform: scale(.75); transform-origin: 0 0; }
.wall { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

.bar {
  position: absolute; left: 0; right: 0; top: 0; height: var(--aux-control-h); padding: 0 var(--aux-space-4);
  display: flex; align-items: center; gap: var(--aux-space-4); border-radius: 0; box-shadow: none;
  border-bottom: 1px solid var(--aux-line); font: 400 var(--aux-text-sm)/1 var(--aux-font-mono); color: var(--aux-fg-2);
  font-variant-numeric: tabular-nums slashed-zero;
}
.bar-logo { height: 11px; width: auto; color: var(--aux-fg); }
.bar-ws { display: flex; gap: var(--aux-space-1); }
.bar-ws i { font-style: normal; width: 18px; height: 18px; display: grid; place-items: center; font-size: var(--aux-text-xs);
  border: 1px solid var(--aux-line-2); border-radius: var(--aux-radius); color: var(--aux-fg-3); }
.bar-ws i.on { background: var(--aux-accent); border-color: var(--aux-accent); color: var(--aux-accent-fg); }
.bar-title { font: 400 13px/1 var(--aux-font-sans); color: var(--aux-fg); }
.bar-item { display: inline-flex; align-items: center; gap: 6px; }
.bar-item b { font-weight: 400; color: var(--aux-fg); }
.bar .icon { --aux-icon-size: 15px; }
.bar-clock { color: var(--aux-fg); white-space: pre; }

.launcher { left: 328px; top: 150px; width: 624px; border: 1px solid var(--aux-edge); }
.launcher-head { height: 42px; padding: 0 var(--aux-pad); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px dashed var(--aux-line); }
.launcher-search { height: calc(var(--aux-control-h) + var(--aux-space-4)); padding: 0 var(--aux-pad); display: flex; align-items: center; gap: var(--aux-space-3);
  border-bottom: 1px solid var(--aux-line); color: var(--aux-fg-3); font: var(--aux-weight-thin) var(--aux-h2)/1 var(--aux-font-sans); }
.launcher-rows { list-style: none; margin: 0; padding: var(--aux-space-2) 0; }
.launcher-rows button {
  position: relative; width: 100%; height: calc(var(--aux-control-h) + var(--aux-space-2)); padding: 0 var(--aux-pad);
  display: flex; align-items: center; gap: var(--aux-space-3); text-align: left; cursor: pointer;
  background: none; border: 0; color: var(--aux-fg); font: var(--aux-weight-head) var(--aux-text)/1 var(--aux-font-sans);
}
.launcher-rows button b { font-weight: inherit; white-space: nowrap; }
.launcher-rows button span { flex: 1; min-width: 0; color: var(--aux-fg-3); font-size: var(--aux-text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.launcher-rows button .icon { color: var(--aux-fg-2); }
.launcher-rows button .badge { display: none; }
.launcher-rows button.cur .badge { display: inline-flex; }
.launcher-rows button.sel { font-weight: var(--aux-weight-strong); }
.launcher-rows button.sel::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--aux-accent-ink); }
.launcher-rows button:focus-visible { outline: 1px solid var(--aux-accent-ink); outline-offset: -2px; }
.launcher-foot { height: 36px; padding: 0 var(--aux-pad); display: flex; align-items: center; gap: var(--aux-space-5); border-top: 1px dashed var(--aux-line);
  font: var(--aux-text-xs)/1 var(--aux-font-mono); color: var(--aux-fg-3); }
.launcher-foot b { font-weight: 400; color: var(--aux-fg-2); margin-right: var(--aux-space-1); }

/* ---------- sections ---------- */
.section { padding: 72px 0 48px; scroll-margin-top: 56px; }
.section-head { display: grid; gap: 14px; margin-bottom: 32px; align-content: start; }
.desc { max-width: 62ch; color: var(--aux-fg-2); font-size: 15px; }
code.mono { font-size: .92em; color: var(--aux-fg); }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 56px; align-items: start; }
.split .section-head { margin-bottom: 0; }
.list .list-title { white-space: normal; }
.list .list-meta { font-size: var(--aux-text-sm); line-height: 1.5; }
.principles .list-meta { color: var(--aux-fg-2); }

.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--aux-gap); }
.feature { display: grid; grid-template-rows: auto 1fr; }
.feature-wide { grid-column: span 2; }
.feature .panel-head .icon { color: var(--aux-fg-2); }
.feature .panel-body p { margin-top: 10px; color: var(--aux-fg-2); }
.feature-latency { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 32px; align-items: end; }

.ships { margin-top: var(--aux-gap); }
.table-scroll { overflow-x: auto; }
.table td:last-child { white-space: normal; }
.table td:first-child { color: var(--aux-fg-2); }

.roadmap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--aux-gap); align-items: start; }

.alpha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--aux-gap); align-items: stretch; }
.alpha .panel-head .icon { color: var(--aux-fg-2); }
.alpha-signup .panel-body { display: grid; gap: 12px; align-content: start; justify-items: start; }
.alpha-signup .btn { margin-top: 8px; }
.alpha .kv { gap: 10px; }
.alpha-hint { margin-top: 14px; }

/* ---------- footer ---------- */
.foot { margin-top: 40px; border-top: 1px dashed var(--aux-line); }
.foot-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding-top: 28px; padding-bottom: 40px; }
.foot-brand { display: grid; gap: 10px; }
.foot-eco { margin-right: -14px; }

/* ---------- responsive ---------- */
@media (max-width: 1040px) {
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .roadmap, .alpha { grid-template-columns: minmax(0, 1fr); }
  .split { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 860px) {
  .top-nav { display: none; }
  .feature-latency { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  .top { padding: 0 16px; gap: 16px; }
  .top .btn + .btn { margin-left: -8px; }
  .top [data-theme-name] { display: none; }
  .hero { padding-top: 48px; }
  .hero-badge { display: flex; margin: 10px 0 0; }
  .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
  .hero-stats .stat:nth-child(3) { border-left: 0; padding-left: 0; }
  .features { grid-template-columns: minmax(0, 1fr); }
  .feature-wide { grid-column: auto; }
  .stat-value { font-size: 34px; }
  .section { padding: 48px 0 32px; }
  .foot-eco { margin-right: 0; margin-left: -14px; }
}