/* the app window's agent dots, here so the page needs no inline styles */
.dot-manager{background:var(--app-dot-manager)}.dot-builder{background:var(--app-dot-builder)}.dot-tester{background:var(--app-dot-tester)}
.dot-reviewer{background:var(--app-dot-reviewer)}.dot-docs{background:var(--app-dot-docs)}

/* the CLI state: calm terminal boxes in the app's graphite */
.s-cli{padding-top:14vh}
.s-cli h2,.s-cli h1{font:300 clamp(1.9rem,3vw,2.7rem)/1.14 var(--serif);letter-spacing:-.018em;margin-left:0}
/* at /cli/ the CLI heading is the h1 and the Home headline keeps its look as an h2 */
.s-home h2.hero{font:300 clamp(3rem,6.6vw,6.2rem)/1 var(--serif);letter-spacing:-.025em;margin-left:-.04em}
.cli-what{max-width:36rem;margin-top:1rem;color:var(--ink-soft);font-size:1.02rem}
.cli{display:grid;grid-template-columns:minmax(0,29rem) minmax(0,29rem);gap:4.5rem;margin-top:2rem;color:var(--ink-soft);font-size:.98rem}
.cli h3{font:400 1.2rem/1.2 var(--serif);color:var(--ink);margin:0 0 .35rem}
.cli p{margin:.2rem 0}
.cli a{border-bottom:1px solid currentColor}
.cli .quiet{font-size:.88rem;color:var(--ink-faint)}
[data-theme="dark"] .cli .quiet{color:var(--ink-soft)}
.term{display:flex;align-items:flex-start;gap:1rem;margin:.45rem 0 .6rem;background:var(--app-bg);border:1px solid var(--app-line);border-radius:10px;padding:.7rem .8rem .7rem 1rem}
.term pre{flex:1;margin:0;font:400 .82rem/1.55 "JBMono",ui-monospace,monospace;color:var(--app-text);white-space:pre-wrap;overflow-wrap:anywhere}
.copy{flex:none;font:500 .78rem/1 var(--sans);color:var(--app-dim);background:transparent;border:1px solid var(--app-line);border-radius:999px;padding:.4rem .75rem;cursor:pointer;transition:color .4s,border-color .4s}
.copy:hover{color:var(--app-text);border-color:var(--app-edge)}
.os-tabs{display:flex;gap:.3rem;margin:.2rem 0 .6rem}
.os-tabs button{font:400 .9rem/1 var(--sans);color:var(--ink-soft);background:transparent;border:0;border-radius:999px;padding:.4rem .8rem;cursor:pointer;transition:color .4s,background .6s}
.os-tabs button:first-child{margin-left:-.8rem}
.os-tabs button[aria-selected="true"]{color:var(--ink);background:var(--sound-bg);box-shadow:inset 0 0 0 1px var(--sound-line)}
.os ol{padding-left:1.2rem}.os li{margin:.2rem 0}
.os code{font:400 .82rem "JBMono",ui-monospace,monospace;background:var(--app-bg);color:var(--app-text);border-radius:6px;padding:.1rem .4rem}
.support{margin-top:.9rem!important}

/* the note behind Download for Mac */
.soon{max-width:24rem;margin-top:.9rem;font-size:.92rem;line-height:1.5;color:var(--ink-soft);background:var(--sound-bg);border:1px solid var(--sound-line);border-radius:12px;padding:.7rem .9rem;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.soon a{color:var(--ink);border-bottom:1px solid currentColor;white-space:nowrap}
.nav .soon{position:absolute;right:clamp(1.25rem,4vw,3.5rem);top:4.6rem;margin:0;text-align:left}
.s-begin .soon{text-align:left}
.foot{flex-wrap:wrap;row-gap:.4rem}

@media (max-width:760px){
  .s-cli{padding-top:16svh}
  .cli{display:block}
  .cli-what{font-size:.95rem;margin-top:.7rem}
  .cli h3{margin:1.4rem 0 .35rem}
  .cli-col:first-child h3{margin-top:0}
  .s-cli h2,.s-cli h1{font-size:1.7rem}
  .cli{position:absolute;left:1.25rem;right:1.25rem;top:calc(16svh + 10.8rem);bottom:4.6rem;margin:0;overflow-y:auto;touch-action:pan-y;overscroll-behavior:contain;padding:.8rem 0 1rem;
    -webkit-mask-image:linear-gradient(transparent,#000 .8rem,#000 calc(100% - 1.5rem),transparent);mask-image:linear-gradient(transparent,#000 .8rem,#000 calc(100% - 1.5rem),transparent)}
  .term pre{font-size:.78rem}
  .nav .soon{left:1.25rem;right:1.25rem;top:6.6rem;max-width:none}
  .foot{flex-wrap:wrap;gap:.5rem 1.1rem}
  .nav nav{font-size:.82rem}
  .os-tabs button:first-child{margin-left:0}
  .nav nav a{padding:.35rem .42rem;white-space:nowrap}
}
/* without WebGL the CLI state shows open water, since the baked window would sit under the text */
.nogl[data-state="cli"] .water{background-image:linear-gradient(var(--scene-sky-top),var(--scene-sky-low) 76%,var(--scene-sea) 78%,var(--scene-deep))}
[data-theme="dark"].nogl[data-state="cli"] .water{background-image:url(fallback-night-water-desktop.jpg)}
@media (max-width:760px){[data-theme="dark"].nogl[data-state="cli"] .water{background-image:url(fallback-night-water-mobile.jpg)}}
/* without JS the page shows Home, or the CLI at /cli/ */
html:not(.js):not(.cli-page) .s-home,html.cli-page:not(.js) .s-cli{visibility:visible}
html:not(.js):not(.cli-page) .s-home>*,html.cli-page:not(.js) .s-cli>*{opacity:1;transform:none;filter:none}
html.cli-page:not(.js) .water{background-image:linear-gradient(var(--scene-sky-top),var(--scene-sky-low) 76%,var(--scene-sea) 78%,var(--scene-deep))}