/* The landing page around its one aegis window. The window itself is styled by
   client.css, the client's own stylesheet with its #a2 scope rewritten to .a2
   (scripts/site_css.py), so it is the real UI's rules applied to markup copied
   from the real UI's DOM. */

:root{
  --bg:#0d0c0b;--paper:#11100e;--rule:#2a2721;--surface:#191814;
  --ink:#dcd9cf;--strong:#f1ede2;--muted:#8a867b;--faint:#6f6b62;--accent:#e0a872;
  --serif:'SS4',Georgia,serif;--mono:'JBM',ui-monospace,monospace;
  --col:min(1180px,calc(100vw - 48px));
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--serif);font-size:17.5px;line-height:1.6}
a{color:var(--strong);text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:3px}
a:hover{text-decoration-color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
h1,h2,h3{font-weight:400;margin:0;color:var(--strong);letter-spacing:-.01em}
p{margin:0 0 1em}
code{font-family:var(--mono);font-size:.84em;background:var(--surface);padding:1px 6px;border-radius:4px;color:var(--strong)}
pre code{background:none;padding:0;font-size:inherit}

/* nav */
.top{width:var(--col);margin:0 auto;display:flex;gap:26px;align-items:baseline;padding:22px 0 0;font-family:var(--mono);font-size:13.5px}
.top a{color:var(--muted);text-decoration:none}
.top a:hover{color:var(--strong)}
.top .mark{color:var(--strong);font-size:16px;margin-right:auto}
.mark{font-family:var(--mono);text-decoration:none}

/* hero: centered */
.hero{width:var(--col);margin:0 auto;padding:96px 0 0;text-align:center}
.hero h1{font-size:clamp(38px,6vw,72px);line-height:1.05;max-width:22ch;margin:0 auto}
.hero .lede{margin:30px auto 0;font-size:clamp(17px,1.6vw,21px);max-width:880px;color:var(--ink)}
.install{margin:40px auto 0;display:grid;gap:12px;justify-items:center}
.install pre{margin:0;background:var(--surface);border:1px solid var(--rule);border-radius:8px;padding:16px 26px;font-family:var(--mono);font-size:14.5px;line-height:1.7;color:var(--strong);text-align:left}
.install .note{color:var(--muted);font-size:15px;margin:0}
.pillars{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;text-align:left}
.pillars a{display:block;height:100%;box-sizing:border-box;padding:20px 22px;border:1px solid var(--rule);border-radius:10px;text-decoration:none;color:var(--muted);font-size:15.5px;line-height:1.5}
.pillars a:hover{border-color:var(--accent);color:var(--ink)}
.pillars b{display:block;color:var(--strong);font-weight:400;font-size:21px;margin-bottom:8px}

/* the app band: full bleed, the text and the one window */
.app{width:calc(100vw - 112px);margin:150px auto 0;display:grid;grid-template-columns:minmax(320px,1fr) minmax(0,2.1fr);gap:56px;align-items:start}
.steps{max-width:560px;justify-self:end}
.steps h2{font-size:clamp(28px,3.2vw,40px);line-height:1.15;padding-top:30vh;scroll-margin-top:24px}
.steps h2:first-child{padding-top:0}
.eyebrow{display:block;font-family:var(--mono);font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.step{padding:20vh 0 0;min-height:52vh;cursor:default}
.steps>h2+.step{padding-top:12vh}
.step:last-of-type{min-height:50vh;padding-bottom:12vh}
.step h3{font-size:24px;line-height:1.25;margin-bottom:14px;position:relative}
.step h3::before{content:"";position:absolute;left:-22px;top:.55em;width:10px;height:2px;background:var(--rule);transition:background .3s,width .3s}
.step.on h3::before{background:var(--accent);width:14px}
.step p{color:var(--ink);transition:color .4s}
.step:not(.on) p,.step:not(.on) h3{color:var(--muted)}
.step .try{font-family:var(--mono);font-size:13.5px;color:var(--accent)}
.step:not(.on) .try{color:var(--faint)}
.step.hl h3,.step.hl p{color:var(--strong)}
.step.hl h3::before{background:var(--accent);width:18px}
.stage-col{position:sticky;top:28px}
.hint{margin:0 0 10px;font-family:var(--mono);font-size:12.5px;color:var(--faint);text-align:right}

/* a window with the client inside */
.frame{background:var(--paper);border:1px solid var(--rule);border-radius:10px;overflow:hidden;box-shadow:0 30px 80px -30px rgba(0,0,0,.8)}
.frame.stage{height:min(820px,calc(100vh - 80px));zoom:.9}
.frame .a2{height:100%;min-height:0}
.a2 .view{overflow:hidden}
.a2 .tr{overflow:hidden}
.a2 .side{overflow:hidden}
.a2 .cmd-menu{display:none}
.a2 .replies{display:none}
.a2 textarea{cursor:default}
.a2 .theme-chip{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:2px 8px;font-size:11.5px;color:var(--ink);cursor:pointer}
.a2 [data-feature],.a2 [data-act]{cursor:pointer}
.a2 .rp.sent{background:var(--accent);color:var(--on-accent)}
/* a feature the pointer is on, in the window or in the text */
.a2 .lit{outline:1.5px dashed var(--accent);outline-offset:2px;border-radius:4px}
.a2 .prow.open-lit{background:var(--raised)}
.stage .v-session .col{position:relative}
.stage .nav{position:absolute;right:14px;bottom:100px;left:auto}

/* what each step dims: what it is not about */
.stage .band>div,.stage .order,.stage .cards,.stage .remote,.stage .col,.stage .side,.stage .composer,.stage .tr{transition:opacity .45s}
.stage[data-step=fleet] .band{opacity:.4}
.stage[data-step=quota] .band>div:not(.q){opacity:.3}
.stage[data-step=links] .v-fleet>.band{opacity:.3}
.stage[data-step=subs] .tr{opacity:.4}
.stage[data-step=together] .side,.stage[data-step=artifact] .side,.stage[data-step=answer] .side,.stage[data-step=fold] .side{opacity:.35}
.stage[data-step=panel] .col{opacity:.35}
.stage[data-step=replies] .tr,.stage[data-step=replies] .side{opacity:.35}
.stage[data-step=replies] .cmd-menu{display:block}
.stage[data-step=replies] .replies,.stage[data-step=phone] .replies{display:flex}
.stage[data-step=artifact] .nav,.stage[data-step=answer] .nav{display:none}
.stage[data-step=artifact] .tr,.stage[data-step=together] .tr{padding-top:8px}
/* the band's columns are sized for a wider window */
.stage .band{grid-template-columns:minmax(160px,.6fr) 1fr 1.4fr;gap:20px}
.stage .gauge{grid-template-columns:52px minmax(40px,1fr) max-content}
/* the card a panel row opens: fixed to the viewport in the client, beside the panel here */
.stage .a2 .pcard.mk-float{display:block;position:absolute;right:calc(var(--side-w,260px) + 12px);left:auto;z-index:5;width:340px;opacity:1;transform:none}
.stage .a2 .pcard.mk-float[hidden]{display:none}
.stage .mk-float .qrow{margin-bottom:10px}
.stage .mk-float .qrow .bar{position:relative;overflow:visible;margin:4px 0 0}
.stage .mk-float .qrow .bar .tick{top:-1px;bottom:-1px}
.stage .mk-float .plan{font-family:var(--font-ui)}
/* the page an agent sent: in the client it runs in a frame with artifact.css */
.a2 .acard .stage.html .page{padding:14px 18px 16px;background:var(--bg);font-family:var(--font-ui);color:var(--ink)}
.a2 .acard .page h2{margin:0 0 6px;font-size:16px;font-weight:600;color:var(--strong);letter-spacing:0}
.a2 .acard .page p{margin:0 0 12px;font-size:13px;color:var(--muted)}
.a2 .acard .page .opts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.a2 .acard .page .opt{display:grid;gap:8px;justify-items:start;padding:10px;border:1px solid var(--rule);border-radius:var(--r);background:var(--surface);color:var(--ink);font:500 12.5px var(--font-ui);cursor:pointer}
.a2 .acard .page .opt:hover{border-color:var(--accent)}
.a2 .acard .page .opt.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.a2 .acard .page .sk{display:grid;grid-template-columns:1fr 2.4fr;gap:4px;width:100%;height:46px}
.a2 .acard .page .sk i{background:var(--raised);border-radius:3px}
.a2 .acard .page .sk.tabs{grid-template-columns:1fr;grid-template-rows:9px 1fr}
.a2 .acard .page .sk.one{grid-template-columns:1fr;grid-template-rows:repeat(3,1fr)}
.a2 .acard .page .opt:hover .sk i:first-child{background:var(--accent-soft)}
[data-theme=logbook].frame{background:#fbfbfa}
[data-theme=logbook] .a2{color-scheme:light}
[data-theme=amphora].frame{background:#e6a571}[data-theme=riso].frame{background:#efeee8}[data-theme=poster].frame{background:#f2f2f0}
[data-theme=amphora] .a2,[data-theme=riso] .a2,[data-theme=poster] .a2{color-scheme:light}

/* the phone step: the client's own 760 px rules, applied by class instead of viewport */
.stage[data-step=phone] .a2{width:390px;margin:0 auto;border-left:1px solid var(--rule);border-right:1px solid var(--rule)}
.stage[data-step=phone] .a2 .tabs{flex-wrap:wrap;padding:4px 6px 0}
.stage[data-step=phone] .a2 .tablist{order:9;flex:1 0 100%;margin:2px -6px 0;padding:0 6px;border-top:1px solid var(--rule)}
.stage[data-step=phone] .a2 .tabs .ver-top,.stage[data-step=phone] .a2 .tablist .tab .srv,.stage[data-step=phone] .a2 .keys-btn,.stage[data-step=phone] .a2 .theme-pick{display:none}
.stage[data-step=phone] .a2 .side-btn{min-width:44px}
.stage[data-step=phone] .a2 .v-session{grid-template-columns:minmax(0,1fr);position:relative}
.stage[data-step=phone] .a2 .side{position:absolute;top:0;right:0;bottom:0;width:min(330px,88%);z-index:3;box-shadow:-8px 0 24px rgba(0,0,0,.5);transform:none;display:flex}
.stage[data-step=phone] .a2 .v-session::after{content:"";position:absolute;inset:0;z-index:2;background:rgba(0,0,0,.5)}
.stage[data-step=phone] .a2 .grip{display:none}
.stage[data-step=phone] .a2 .tr{padding:12px 12px 6px}
.stage[data-step=phone] .a2 .replies{flex-direction:column;align-items:stretch}
.stage[data-step=phone] .a2 .replies .lbl{display:none}
.stage[data-step=phone] .a2 .rp{min-height:44px;padding:10px 14px;font-size:14.5px}

/* the sections below: centered */
.plain{width:var(--col);margin:150px auto 0;text-align:center}
.plain h2{font-size:clamp(28px,3.4vw,40px);line-height:1.15}
.plain>p{margin:22px auto 0;max-width:820px}
.ladder{list-style:none;counter-reset:rung;margin:44px auto 0;padding:0;max-width:820px;display:flex;flex-direction:column;gap:12px;text-align:left}
.ladder li{counter-increment:rung;position:relative;padding:16px 20px 16px 64px;border:1px solid var(--rule);border-radius:10px;color:var(--muted);font-size:15.5px;line-height:1.5}
.ladder li::before{content:counter(rung);position:absolute;left:22px;top:14px;font-size:24px;color:var(--accent)}
.ladder li:last-child{border-color:var(--accent)}
.ladder b{display:block;color:var(--strong);font-weight:400;font-size:19px;margin-bottom:4px}
.ladder i{font-style:normal;color:var(--ink)}
/* sized to its longest line; a narrow page wraps it rather than scroll it */
.code{margin:32px auto 26px;background:var(--surface);border:1px solid var(--rule);border-radius:8px;padding:18px 24px;font-family:var(--mono);font-size:13.5px;line-height:1.65;color:var(--ink);width:fit-content;max-width:100%;box-sizing:border-box;white-space:pre-wrap;overflow-wrap:anywhere;text-align:left}
.code .k{color:var(--accent)}
.tgroups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin:44px 0 0;text-align:left}
.tgroup{font-size:21px;margin:0 0 18px;color:var(--strong)}
.tools{display:grid;gap:18px;margin:0}
.tools div{display:grid;gap:4px}
.tools dt{font-family:var(--mono);font-size:14px;color:var(--strong)}
.tools dd{margin:0;font-size:15.5px;color:var(--muted);line-height:1.5}

/* footer */
footer{width:var(--col);margin:150px auto 0;padding:34px 0 60px;border-top:1px solid var(--rule);font-size:15px;color:var(--muted)}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}
footer .mark{font-size:16px;display:inline-block;margin-bottom:10px}
footer p{color:var(--muted);max-width:48ch}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
footer a{color:var(--muted)}
footer a:hover{color:var(--strong)}

/* narrow pages: the window pinned under the top, the steps under it */
@media (max-width:980px){
  .app{width:var(--col);grid-template-columns:1fr;gap:0}
  .steps{max-width:none;justify-self:stretch}
  .stage-col{order:-1;top:0;z-index:5;padding:8px 0;background:linear-gradient(var(--bg) 85%,transparent)}
  .hint{display:none}
  .frame.stage{zoom:.7;height:min(440px,52vh)}
  .steps h2{padding-top:14vh}
  .step{padding:12vh 0 0;min-height:52vh}
  .step h3::before{display:none}
  .pillars,.tgroups{grid-template-columns:1fr}
  footer .cols{grid-template-columns:1fr 1fr}
  footer .cols>div{grid-column:1/-1}
  /* a short window shows the latest rows, as the client does while it follows */
  .stage .a2 .tr{display:flex;flex-direction:column;justify-content:flex-end}
}
@media (max-width:620px){
  :root{--col:calc(100vw - 32px)}
  body{font-size:16.5px}
  .top{gap:16px;flex-wrap:wrap}
  .top a:not(.mark){font-size:12.5px}
  .hero{padding-top:56px}
  .frame.stage{zoom:.55;height:min(420px,50vh)}
}
@media (prefers-reduced-motion:reduce){
  .stage .band>div,.stage .order,.stage .cards,.stage .remote,.stage .col,.stage .side,.stage .composer,.stage .tr,.step p,.step h3::before{transition:none}
  .a2 .ic.work{animation:none}
}

/* The install block's two tabs: a person's commands, or a prompt for their agent. */
.install .itabs{display:flex;gap:0;justify-content:center}
.install .itabs button{font:13px var(--mono);background:var(--bg);color:var(--muted);border:1px solid var(--rule);padding:6px 14px;cursor:pointer}
.install .itabs button+button{border-left:0}
.install .itabs button.on{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.install .ipane{display:grid;gap:12px;justify-items:center;max-width:100%}
.install .ipane[hidden]{display:none}
.install pre{max-width:100%;overflow-x:auto}
.install .copy{font:12px var(--mono);background:none;border:1px solid var(--rule);color:var(--muted);border-radius:5px;padding:2px 9px;cursor:pointer;margin-left:6px}
.install .setup-note{max-width:62ch;text-align:center}
.ladder a{color:inherit;text-decoration:none;display:block}
.step .fine{font-family:var(--mono);font-size:12.5px;line-height:1.55;color:var(--faint);border-left:2px solid var(--rule);padding-left:10px}
.step.on .fine{color:var(--muted)}
.stage .dict,.stage .att{font-family:var(--mono);font-size:10.5px;color:var(--faint);border:1px solid var(--rule);border-radius:999px;padding:0 7px;margin-left:4px;white-space:nowrap}
.stage .fprev{border-top:1px solid var(--rule);padding:8px 12px;font-size:12.5px;color:var(--ink)}
.stage .wtree{margin:6px 0 4px;padding:0 12px 0 30px;font-size:12.5px;color:var(--ink)}
.stage .wtree li{margin:2px 0}
@media (max-width:760px){.install pre{padding:12px 14px;font-size:12.5px;white-space:pre-wrap;overflow-wrap:anywhere}}
@media (pointer:coarse){.install .itabs button,.install .copy{min-height:44px}}

/* The film: two minutes of aegis itself, filmed by scripts/demo. */
.film { max-width: 1100px; margin: 8px auto 56px; padding: 0 20px; }
.film video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px;
  background: #0b0d10; box-shadow: 0 30px 80px rgba(0,0,0,.35); }