/* Colors from gui/Theme.java. Lavender is the only accent, and the only glow on
   the page sits behind the product shot. */
:root{
  --bg:#07080F; --panel:#101320; --rail:#0C0E19;
  --line:rgba(255,255,255,.09); --rim:rgba(255,255,255,.13);
  --text:#EDEFF7; --sub:#9AA0B4; --mute:#8A90A6; --off:#666D88;
  --accent:#B794F6; --accent-2:#9F7AEA; --accent-soft:rgba(183,148,246,.13);
  --col:1000px; --read:660px; --r:6px; --r-lg:14px;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--text); font-size:17px; line-height:1.65;
  font-family:Archivo,system-ui,-apple-system,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:var(--r)}
.skip{position:absolute; left:-9999px}
.skip:focus{left:12px; top:12px; background:var(--bg); border:1px solid var(--accent);
  padding:10px 14px; border-radius:var(--r); z-index:9}

.wrap{max-width:var(--col); margin:0 auto; padding:0 28px}
.narrow{max-width:var(--read)}
header{border-bottom:1px solid var(--line)}
header .wrap{display:flex; align-items:center; gap:24px; height:64px}
.mark{color:var(--text); font-weight:700; font-stretch:112%; letter-spacing:.04em;
  text-transform:uppercase; font-size:15px}
.mark:hover{text-decoration:none; color:var(--accent)}
nav{margin-left:auto; display:flex; gap:22px; font-size:15px}
nav a{color:var(--sub)}
nav a:hover{color:var(--text)}
nav a[aria-current="page"]{color:var(--text)}

/* Scale contrast does the work: one oversized line against 11px labels. */
h1{font-size:clamp(40px,7.4vw,88px); line-height:.98; letter-spacing:-.035em; font-weight:800;
  font-stretch:112%; margin:0; text-wrap:balance; max-width:14ch}
h2{font-size:clamp(24px,3vw,32px); line-height:1.12; letter-spacing:-.025em; font-weight:700;
  font-stretch:106%; margin:0; text-wrap:balance}
h3{font-size:17px; font-weight:700; letter-spacing:-.01em; margin:0}
p{margin:0 0 18px}
main{padding:76px 0 40px}
.lede{color:var(--sub); font-size:19px; max-width:44ch; line-height:1.5}
.label{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--mute);
  font-weight:600}
.meta{color:var(--mute); font-size:14px; font-variant-numeric:tabular-nums}
.sep{border:0; border-top:1px solid var(--line); margin:0}
.route[hidden]{display:none}

.btn{display:inline-block; padding:13px 22px; border-radius:var(--r); font-size:15px;
  font-weight:700; background:var(--accent); color:#150C24}
.btn:hover{text-decoration:none; background:#C7A9F8}
.actions{display:flex; align-items:center; gap:24px; flex-wrap:wrap; margin:32px 0 0}

/* hero */
.hero{padding-top:40px}

/* The product shot is the client's window on the client's own backdrop, at the
   real proportions: 760x460 virtual, PAD 16, SEARCH_H 26, cards 92 tall, 3 up,
   gap 12. Numbers from gui/AuroraScreen.java and gui/Theme.java. */
.shot{margin:72px 0 0}
.scene{position:relative; border-radius:14px; overflow:hidden; padding:42px 28px;
  border:1px solid var(--rim);
  background:linear-gradient(180deg,#03040A 0%,#070912 48%,#0A0817 100%)}
.scene::before,.scene::after{content:""; position:absolute; border-radius:50%; filter:blur(70px)}
.scene::before{width:60%; height:120%; left:-8%; top:-40%;
  background:radial-gradient(circle,rgba(159,122,234,.40),transparent 68%)}
.scene::after{width:52%; height:100%; right:-6%; bottom:-38%;
  background:radial-gradient(circle,rgba(126,164,232,.22),transparent 70%)}
.stars{position:absolute; inset:0}
.win{position:relative; z-index:1; max-width:720px; margin:0 auto; padding:15px;
  border-radius:12px; background:rgba(16,19,31,.72); border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09), 0 30px 70px -40px #000}
.win-top{display:flex; align-items:center; gap:12px; margin-bottom:13px}
.win-brand{font-weight:800; font-stretch:112%; font-size:15px; letter-spacing:.02em}
.chips{margin-left:auto; display:flex; gap:4px}
.chips span{width:22px; height:22px; border-radius:6px; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10); display:grid; place-items:center; color:var(--sub)}
.chips span.on{background:var(--accent-soft); border-color:rgba(183,148,246,.5); color:var(--accent)}
.win-search{height:26px; border-radius:6px; background:rgba(10,12,21,.72);
  border:1px solid rgba(255,255,255,.10); display:flex; align-items:center; padding:0 9px;
  color:var(--off); font-size:12px; margin-bottom:12px}
.win-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.card{position:relative; height:92px; border-radius:12px; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.13); display:grid; justify-items:center;
  align-content:start; padding-top:8px}
.card.on{background:rgba(42,32,68,.62); border-color:rgba(183,148,246,.30)}
.card .tick{position:absolute; left:8px; top:8px; width:15px; height:15px; border-radius:4px;
  border:1px solid rgba(255,255,255,.22); background:rgba(10,12,21,.5)}
.card.on .tick{border-color:rgba(183,148,246,.75); background:rgba(183,148,246,.22)}
.card.on .tick::after{content:""; position:absolute; left:3px; top:5px; width:7px; height:3px;
  border-left:2px solid var(--accent); border-bottom:2px solid var(--accent);
  transform:rotate(-45deg)}
.card .gear{position:absolute; right:8px; top:8px; width:15px; height:15px; border-radius:5px;
  background:rgba(183,148,246,.14); display:grid; align-content:center; gap:2px; padding:0 3px}
.card .gear i{display:block; height:1px; background:var(--sub)}
/* The icon plate stays dark in both states. The glyph carries the state, which
   is the note in AuroraScreen about not flooding it with flat lavender.

   Named .glyph, not .badge: the Primitives block at the end of this file also
   defines .badge, and being the later bare rule it was winning display,
   background, border and colour here. The plate kept its 38px box and its
   place-items, which do nothing once display is inline-block, so the module
   icons were sitting off centre inside a pill meant for the admin panel. */
.glyph{width:38px; height:38px; border-radius:11px; background:#262A3C; margin-top:23px;
  border:1px solid rgba(255,255,255,.14); display:grid; place-items:center; color:var(--sub)}
.card.on .glyph{border-color:rgba(183,148,246,.6); background:#2B2745; color:var(--accent)}
.card b{font-size:11.5px; font-weight:500; margin-top:5px; color:var(--text)}
.scrollbar{position:absolute; right:6px; top:96px; bottom:20px; width:3px; border-radius:3px;
  background:rgba(255,255,255,.06)}
.scrollbar i{display:block; height:38%; border-radius:3px; background:rgba(255,255,255,.18)}
.shot-cap{margin-top:16px; text-align:center}

/* videos */
.watch{margin-top:96px; border-top:1px solid var(--line); padding-top:28px}
.vgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:26px}
.vid{display:grid; gap:10px; color:var(--text)}
.vid:hover{text-decoration:none}
.vid:hover .vt{color:var(--accent)}
.vid:hover .thumb{border-color:rgba(183,148,246,.42)}
/* On the real site these are img.youtube.com thumbnails. The artifact sandbox
   blocks external images, so the card draws its own ground instead. */
.thumb{position:relative; aspect-ratio:16/9; border-radius:10px; overflow:hidden;
  border:1px solid var(--rim); display:grid; place-items:center; transition:border-color .16s;
  background:radial-gradient(120% 95% at 26% 20%, hsla(var(--h),58%,60%,.32), transparent 62%),
    linear-gradient(180deg,#03040A,#0A0817)}
.play{width:38px; height:38px; border-radius:12px; background:rgba(7,9,18,.55);
  border:1px solid rgba(255,255,255,.18); display:grid; place-items:center; font-size:11px;
  color:var(--text)}
.dur{position:absolute; right:8px; bottom:8px; font-size:11px; background:rgba(7,9,18,.82);
  padding:2px 7px; border-radius:5px; color:var(--sub); font-variant-numeric:tabular-nums}
.vid .vt{font-size:15px; font-weight:600; line-height:1.3}
.vid .vm{color:var(--mute); font-size:13px}

/* ask */
.ask{padding-top:96px}
.ask input{width:100%; max-width:520px; height:54px; background:transparent; color:var(--text);
  border:1px solid var(--rim); border-radius:var(--r); padding:0 18px; font:inherit; font-size:17px;
  margin-top:22px}
.ask input::placeholder{color:var(--off)}
.ask input:focus{border-color:var(--accent); outline:none}
.commons{display:flex; flex-wrap:wrap; gap:16px; margin-top:16px; font-size:14px; color:var(--mute)}
.commons button{font:inherit; font-size:14px; color:var(--sub); background:none; border:0;
  padding:0; cursor:pointer; text-decoration:underline; text-underline-offset:3px}
.commons button:hover{color:var(--accent)}
.results{margin-top:32px; display:grid; gap:34px; max-width:600px}
.answer .ref{color:var(--mute); font-size:13px; font-variant-numeric:tabular-nums}
.answer h3{margin:3px 0 6px}
.answer p{color:var(--sub); font-size:16px; margin:0 0 8px}
.answer a{font-size:15px}
.noanswer{color:var(--sub); max-width:52ch}


/* inner pages */
/* padding-top, not the padding shorthand. .pagetop, .hero and .ask are each
   set on a .wrap, and `padding:Npx 0 0` reset that wrap's 28px of side padding
   to zero. Invisible on the routes that were .narrow and centred inside a wider
   column, but it put every one of them flush against the edge of a phone. */
.pagetop{padding-top:8px}
.pagetop h1{font-size:clamp(34px,5vw,58px); max-width:16ch}
.rows{margin-top:36px}
.rowi{display:grid; grid-template-columns:170px 1fr; gap:24px; padding:20px 0;
  border-top:1px solid var(--line)}
.rowi .k{color:var(--mute); font-size:14px}
.rowi .v{color:var(--sub)}
.rowi .v b{color:var(--text); font-weight:600}
.doc{display:grid; grid-template-columns:1fr; gap:36px; margin-top:8px}
.toc ol{list-style:none; margin:0; padding:0; display:grid; gap:7px; font-size:15px}
.toc a{color:var(--sub)}
.toc a.cur{color:var(--text)}
.toc .sub{padding-left:18px; display:grid; gap:6px; margin-top:6px; font-size:14px}
.toc .soon{color:var(--off)}
.prose{max-width:64ch}
.prose h3{margin:44px 0 10px; font-size:16px}
.prose p{color:var(--sub); line-height:1.78}
.prose strong{color:var(--text); font-weight:600}
.callout{background:var(--accent-soft); border:1px solid rgba(183,148,246,.2);
  border-radius:var(--r); padding:15px 17px; color:var(--sub); font-size:16px; margin:0 0 18px}
.filters{display:flex; gap:18px; margin-top:26px; font-size:14px}
.filters button{font:inherit; font-size:14px; background:none; border:0; padding:0; cursor:pointer;
  color:var(--mute)}
.filters button[aria-pressed="true"]{color:var(--text)}
.filters button:hover{color:var(--accent)}
.steps{margin-top:10px; padding-left:20px; color:var(--sub)}
.steps li{margin-bottom:7px}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:14.5px; color:var(--text)}

/* download
 *
 * The one page with something to sell, so it gets the width the inner pages
 * give up and the density the service can actually back: the button and what
 * you are getting on the left, the release you are getting on the right.
 * No new glow. The rule at the top of this file is that the only one on the
 * site sits behind the product shot, and a second would make this page shout
 * over the hero. Weight comes from the panel, the numerals and the data. */
.btn-lg{padding:16px 28px; font-size:16px}

.dl{display:grid; gap:28px; margin-top:34px; align-items:start}
@media (min-width:820px){
  .dl{grid-template-columns:.92fr 1.08fr; gap:56px}
}

.specs{list-style:none; margin:26px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.specs li{display:flex; align-items:center; gap:7px; font-size:13px; color:var(--sub);
  border:1px solid var(--line); border-radius:999px; padding:6px 13px 6px 10px;
  background:rgba(255,255,255,.025); font-variant-numeric:tabular-nums}
.specs svg{width:15px; height:15px; color:var(--accent); flex:none}

/* The dot is the only moving thing on the page, and it is moving because the
   number beside it is live. */
.live{display:flex; align-items:center; gap:9px; margin:22px 0 0; font-size:14px;
  color:var(--mute); font-variant-numeric:tabular-nums}
.live b{color:var(--text); font-weight:600}
.live .dot{width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none;
  box-shadow:0 0 0 0 rgba(183,148,246,.55); animation:pulse 2.4s ease-out infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(183,148,246,.5)}
  70%{box-shadow:0 0 0 7px rgba(183,148,246,0)}
  100%{box-shadow:0 0 0 0 rgba(183,148,246,0)}
}

.dl-new{background:rgba(255,255,255,.028); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:24px 26px 26px}
/* The version is the headline of this panel, so it is set like one. */
.ver{font-size:44px; line-height:1; letter-spacing:-.03em; font-weight:800; font-stretch:112%;
  margin:14px 0 4px; font-variant-numeric:tabular-nums}
.ver small{display:block; font-size:13px; font-weight:400; font-stretch:100%; letter-spacing:0;
  color:var(--mute); margin-top:9px}

.steps-cards{list-style:none; margin:56px 0 0; padding:0; display:grid; gap:14px}
@media (min-width:820px){
  .steps-cards{grid-template-columns:repeat(3,1fr); gap:18px}
}
.steps-cards li{border:1px solid var(--line); border-radius:var(--r-lg); padding:20px 22px 22px;
  color:var(--sub); font-size:15px; line-height:1.55; background:rgba(255,255,255,.018)}
.steps-cards .n{display:block; font-size:13px; font-weight:700; color:var(--accent);
  font-variant-numeric:tabular-nums; margin-bottom:10px}

.history{margin-top:64px; border-top:1px solid var(--line); padding-top:26px}
.history .label{margin-bottom:6px}

/* The newest release reads as a list inside the panel; older ones are the same
   list behind a disclosure. Six of them expanded ran to four screens, and one
   was thirty lines on its own, which put the download button off the top of a
   download page. */
.rel ul{margin:0; padding-left:18px; display:grid; gap:6px}
.rel li{font-size:15px; line-height:1.55; color:var(--sub)}
details.rel{border-top:1px solid var(--line); padding:14px 0}
details.rel:first-of-type{border-top:0}
details.rel summary{display:block; cursor:pointer; color:var(--mute); font-size:14px;
  list-style:none; font-variant-numeric:tabular-nums}
details.rel summary::-webkit-details-marker{display:none}
details.rel summary::marker{content:""}
details.rel summary::before{content:"+"; color:var(--accent); display:inline-block; width:18px}
details.rel[open] summary::before{content:"\2212"}
details.rel summary:hover{color:var(--text)}
details.rel ul{margin:12px 0 2px 18px}

@media (prefers-reduced-motion:reduce){
  .live .dot{animation:none}
}

footer{border-top:1px solid var(--line); margin-top:104px; padding:28px 0 52px; color:var(--mute);
  font-size:14px}
footer .wrap{display:flex; flex-wrap:wrap; gap:14px 24px}
footer a{color:var(--sub)}
footer .legal{margin-left:auto}

@media (min-width:900px){
  .doc{grid-template-columns:190px 1fr; gap:52px; align-items:start}
  .toc{position:sticky; top:32px}
}
@media (max-width:860px){
  .win-grid{grid-template-columns:repeat(2,1fr)}
  .vgrid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .win-grid,.vgrid{grid-template-columns:1fr}
}
@media (max-width:600px){
  .rowi{grid-template-columns:1fr; gap:6px}
  footer .legal{margin-left:0}
  /* One row needs 427px and a phone does not have it, so Download was being
     cut off the right edge on every route. The nav drops to its own line
     instead of shrinking, which keeps the tap targets the size they are
     everywhere else. */
  header .wrap{height:auto; flex-wrap:wrap; gap:10px 20px; padding-top:14px; padding-bottom:14px}
  nav{margin-left:0; width:100%; flex-wrap:wrap; gap:10px 20px}
}
@media (prefers-reduced-motion:reduce){*{transition:none}}


/* ---------------------------------------------------------------------------
 * The ground
 *
 * Flat near-black was the honest starting point and it read as unfinished. The
 * client is called Aurora, so the page sits on one: a few very soft washes low
 * in the frame, drifting slowly enough that you notice it only if you wait.
 *
 * Two rules keep it from becoming the glow the top of this file warns about.
 * Nothing here is bright — the strongest wash is .28 alpha under 70px of blur,
 * so it never competes with the product shot, which is still the only lit
 * object on the site. And it is fixed rather than scrolled, so it behaves like
 * a room the content moves through rather than a decoration attached to it.
 * --------------------------------------------------------------------------- */
body::before{
  content:""; position:fixed; z-index:-2; pointer-events:none;
  left:-15%; right:-15%; top:-25%; height:135vh;
  background:
    radial-gradient(52% 38% at 20% 22%, rgba(159,122,234,.28), transparent 64%),
    radial-gradient(44% 32% at 76% 10%, rgba(112,152,224,.20), transparent 68%),
    radial-gradient(64% 44% at 52% 0%,  rgba(118,84,188,.16), transparent 72%);
  filter:blur(70px);
  animation:aurora-drift 48s ease-in-out infinite alternate;
}
@keyframes aurora-drift{
  from{transform:translate3d(-3%,0,0) scale(1)}
  to  {transform:translate3d(3%,2%,0) scale(1.08)}
}

/* Stars, as a tiled dot pattern rather than a canvas: the hero already spends a
   canvas on the ones inside the product shot, and this only has to be texture. */
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:
    radial-gradient(1px 1px at 18% 12%, rgba(237,239,247,.5), transparent),
    radial-gradient(1px 1px at 62% 28%, rgba(237,239,247,.4), transparent),
    radial-gradient(1px 1px at 84% 8%,  rgba(237,239,247,.35), transparent),
    radial-gradient(1px 1px at 33% 62%, rgba(237,239,247,.4), transparent),
    radial-gradient(1px 1px at 71% 78%, rgba(237,239,247,.3), transparent),
    radial-gradient(1px 1px at 8%  84%, rgba(237,239,247,.35), transparent),
    radial-gradient(1px 1px at 47% 44%, rgba(237,239,247,.25), transparent);
  background-size:340px 340px;
}

/* The washes sit behind the page, so anything with its own ground has to say so
   or it inherits the body's transparency and the aurora shows through the text. */
header, footer{position:relative; background:rgba(7,8,15,.72); backdrop-filter:blur(12px)}
main{position:relative}

@media (prefers-reduced-motion:reduce){
  body::before{animation:none}
}

/* ---- coming soon, and the profile lookup ----------------------------------- */

.soon{margin-top:44px; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:26px 28px 28px; background:rgba(255,255,255,.028); max-width:52ch}
.soon .label{margin:0 0 10px}
.soon p:last-child{margin:0; color:var(--sub)}

.lookup{display:flex; gap:12px; margin-top:34px; flex-wrap:wrap}
.lookup input{flex:1 1 240px; min-width:0; height:52px; background:transparent;
  color:var(--text); border:1px solid var(--rim); border-radius:var(--r); padding:0 18px;
  font:inherit; font-size:16px}
.lookup input::placeholder{color:var(--off)}
.lookup input:focus{border-color:var(--accent); outline:none}
.lookup .btn{border:0; cursor:pointer; font-family:inherit}

.pf{margin-top:38px}
.pf-head{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.pf-head h2{margin:0}
.pf-on{display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--accent);
  border:1px solid rgba(183,148,246,.3); background:var(--accent-soft);
  border-radius:999px; padding:5px 12px}
.pf .meta{margin-top:8px}

/* ---------------------------------------------------------------------------
 * Primitives
 *
 * Nothing on the public site uses these yet. They exist so a page that was not
 * designed here (the admin panel) can be restyled by swapping its classes for
 * these, rather than by rewriting its CSS against the tokens by hand.
 * --------------------------------------------------------------------------- */

.panel{background:rgba(255,255,255,.04); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:20px}

.btn-ghost{display:inline-block; padding:13px 22px; border-radius:var(--r); font-size:15px;
  font-weight:600; background:transparent; color:var(--text); border:1px solid var(--rim)}
.btn-ghost:hover{text-decoration:none; background:rgba(255,255,255,.05)}
.btn-danger{display:inline-block; padding:13px 22px; border-radius:var(--r); font-size:15px;
  font-weight:600; background:rgba(224,109,109,.14); color:#E9A0A0;
  border:1px solid rgba(224,109,109,.32)}
.btn-danger:hover{text-decoration:none; background:rgba(224,109,109,.2)}

/* Fields match the ask input, which is the one input the site already has. */
.field{display:grid; gap:7px}
.field label{font-size:13px; color:var(--mute)}
.field input,.field select,.field textarea{background:transparent; color:var(--text);
  border:1px solid var(--rim); border-radius:var(--r); padding:11px 14px; font:inherit;
  font-size:15px; width:100%}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);
  outline:none}
.field .hint{font-size:13px; color:var(--mute)}

/* Wide tables scroll in their own container so the page never does. */
.table-wrap{overflow-x:auto}
table.data{width:100%; border-collapse:collapse; font-size:15px}
table.data th{text-align:left; font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--mute); font-weight:600; padding:0 16px 12px 0; border-bottom:1px solid var(--line)}
table.data td{padding:14px 16px 14px 0; border-bottom:1px solid var(--line); color:var(--sub);
  vertical-align:top}
table.data td:first-child{color:var(--text)}
table.data tbody tr:last-child td{border-bottom:0}
table.data .num{font-variant-numeric:tabular-nums; text-align:right; padding-right:0}

.badge{display:inline-block; font-size:11px; letter-spacing:.06em; padding:3px 9px;
  border-radius:5px; border:1px solid var(--line); color:var(--sub);
  background:rgba(255,255,255,.04)}
.badge.ok{color:var(--accent); border-color:rgba(183,148,246,.3);
  background:var(--accent-soft)}
.badge.warn{color:#E8C07A; border-color:rgba(232,192,122,.28);
  background:rgba(232,192,122,.10)}
.badge.bad{color:#E9A0A0; border-color:rgba(224,109,109,.3);
  background:rgba(224,109,109,.10)}

.empty{color:var(--mute); padding:34px 0; text-align:center}