/* the terminal boxes and system tabs on /cli/ and /technical-details/ */
/* 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}
.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}

.foot{flex-wrap:wrap;row-gap:.4rem}

@media (max-width:760px){
  .term pre{font-size:.78rem}
  .foot{flex-wrap:wrap;gap:.5rem 1.1rem}
  .os-tabs button:first-child{margin-left:0}
}
/* 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))}