/* ceplin.com - the terminal's own design language, on one page.

   Tokens are the terminal's (cpln-terminal cmd/server/ui/app.css): the same
   greyscale depths, plane borders, pills, status rings and prompt colours, so
   the site reads as a window onto the product rather than a page about it.
   Dark only. No web fonts and no third-party requests: like the terminal, the
   page fetches nothing it does not serve itself. */

:root{
  --nav:#171717;            /* base: header, page */
  --surface:#3e3e3e;        /* output plane */
  --surface-hi:#2b2b2b;     /* terminal plane */
  --surface-lift:#484848;   /* notes */
  --plane-border:#606060;
  --rule:#5b5b5b;
  --ink:#ffffff; --ink-dim:#b8b8b8; --ink-faint:#8a8a8a;
  --menu-ink:#9b9b9b;
  --term-pill:#89f06c; --term-pill-ink:#2b2b2b;
  --out-pill:#000000;
  --notes-label:#acacac; --notes-ink:#dbdbdb;
  --st-ok:#89f06c;  --st-ok-b:#255f1d;
  --st-warn:#f0b66c; --st-warn-b:#5f421d;
  --st-err:#f06c6c; --st-err-b:#5f1d1d;
  --hl-blue:#1faed3; --hl-field:#90d273; --hl-cmt:#6b7280;
  --hl-brace-a:#c867d4; --hl-brace-b:#dbcc46;
  --link:#9ccfff;
  --code-bg:#262626;
  color-scheme:dark;
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

*{box-sizing:border-box}
::selection{background:#3f6d8c;color:#fff}
html{background:var(--nav)}
body{margin:0;background:var(--nav);color:var(--ink);
     font:15px/1.65 "DejaVu Sans Mono","SFMono-Regular",Menlo,Consolas,monospace;
     -webkit-text-size-adjust:100%}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--hl-blue);outline-offset:3px}

.wrap{max-width:1240px;margin:0 auto;padding:0 28px}

/* ---- header ---------------------------------------------------------- */
.bar{display:flex;align-items:center;gap:40px;height:78px}
.brand{display:flex;align-items:center;gap:13px;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand .mark{height:29px;width:auto;display:block}
.brand .word{height:29px;width:auto;display:block;position:relative;top:3px}

/* ---- intro and the waitlist under it ------------------------------- */
.intro{padding:64px 0 72px;max-width:860px}
h1{font-size:30px;line-height:1.3;font-weight:700;margin:0 0 18px;letter-spacing:0}
.lede{color:var(--ink-dim);font-size:16px;margin:0 0 34px;max-width:740px}
.note code{font:inherit;font-size:.92em;color:var(--hl-blue);background:var(--code-bg);
     border-radius:4px;padding:1px 5px}

.invite{color:var(--ink);margin:0 0 16px;max-width:760px}
.prompt{display:flex;align-items:center;gap:14px;background:var(--surface-hi);
        border:1px solid var(--plane-border);border-radius:14px;padding:10px 10px 10px 20px;max-width:760px}
.prompt[hidden]{display:none}
.prompt .ps{font-size:15px;color:var(--ink-dim);user-select:none}
.prompt input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--hl-blue);
        font:inherit;font-size:15px;padding:8px 0;caret-color:var(--ink)}
.prompt input::placeholder{color:var(--ink-faint);opacity:1}
.prompt:focus-within{border-color:var(--hl-blue)}
.go{flex:0 0 auto;display:flex;align-items:center;gap:10px;height:38px;padding:0 20px;border:0;border-radius:19px;
    background:var(--term-pill);color:var(--term-pill-ink);font:inherit;font-size:14px;letter-spacing:.08em;cursor:pointer}
.go:hover{filter:brightness(1.06)}
.go:disabled{opacity:.6;cursor:default}
.go svg{width:11px;height:12px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.result{min-height:1.65em;margin:14px 0 0;display:flex;align-items:flex-start;gap:10px;max-width:760px}
.result .status{margin-top:.28em}
.result:empty{display:none}
.tag{color:var(--ink-faint)}
/* After a sign-up the form gives way to this. */
.thanks{max-width:760px;background:var(--surface-hi);border:1px solid var(--plane-border);border-radius:14px;
        padding:18px 22px;display:flex;gap:14px;align-items:flex-start}
.thanks[hidden]{display:none}
.thanks .status{margin-top:.3em}
.thanks b{display:block;font-size:16px;margin-bottom:4px}
.thanks p{margin:0;color:var(--ink-dim)}
.fine{color:var(--ink-faint);font-size:13px;margin:12px 0 0;max-width:760px}

/* ---- labels: the terminal's pills, without the tab frames ---------- */
.label{display:flex;align-items:center;gap:10px;height:30px;padding:0 16px;border-radius:15px;width:max-content;
       font-size:13px;letter-spacing:.08em;line-height:1;white-space:nowrap;margin:0 0 12px}
.label svg{width:10px;height:7px}
.l-ws{background:var(--term-pill);color:var(--term-pill-ink)}
.l-out{background:var(--out-pill);color:#fff;border:1px solid #5a5a5a}  /* lifted off the page, which is nearly as dark */
.l-notes{color:var(--notes-label);letter-spacing:.14em;padding:0;height:auto;margin-bottom:14px}

.status{width:14px;height:14px;border-radius:50%;flex:0 0 auto;background:#6b6b6b;border:3px solid #3a3a3a}
.status.ok{background:var(--st-ok);border-color:var(--st-ok-b)}
.status.err{background:var(--st-err);border-color:var(--st-err-b)}
.status.wait{background:var(--st-warn);border-color:var(--st-warn-b)}

/* ---- the two planes ------------------------------------------------- */
.planes{display:grid;grid-template-columns:1fr 1fr;column-gap:0}
.pane{display:flex;flex-direction:column;min-width:0}
.plane{flex:1;border:1px solid var(--plane-border);padding:22px 22px 26px;min-height:320px;
       font-size:14px;line-height:1.75}
.ws .plane{background:var(--surface-hi);border-radius:14px 0 0 14px;border-right:0}
.out .plane{background:var(--surface);border-radius:0 14px 14px 0}

.ln{white-space:pre-wrap;overflow-wrap:break-word;margin:0 0 6px}
.ln .h-a{overflow-wrap:anywhere}  /* a long artefact breaks, the verbs after it do not */
.ps{color:var(--ink-dim);user-select:none}
.h-a{color:var(--hl-blue)}          /* artefact */
.h-f{color:var(--hl-field)}         /* [field] */
.h-b1{color:var(--hl-brace-a)}
.caret{display:inline-block;width:.6em;height:1.15em;vertical-align:-.2em;background:var(--ink);
       animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

.res{margin:0 0 18px}
.res + .res{border-top:1px solid var(--rule);padding-top:16px}
.rh{white-space:pre-wrap;overflow-wrap:anywhere}
.kv{display:grid;grid-template-columns:max-content 1fr;column-gap:18px;margin:6px 0 0 46px}
.kv dt{color:var(--ink-faint)}
.kv dd{margin:0;overflow-wrap:anywhere}
.dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:8px;vertical-align:.15em}
.dot.r{background:var(--st-err)} .dot.g{background:#8a8a8a}
.v-link{color:var(--link)}

/* ---- notes ---------------------------------------------------------- */
.notes{margin-top:64px}
.notes .plane{background:var(--surface-lift);border-radius:14px;color:var(--notes-ink);
       min-height:0;padding:26px 28px 10px;font-size:14.5px}
.note{display:grid;grid-template-columns:28ch 1fr;gap:28px;padding:0 0 18px;margin:0 0 18px;
      border-bottom:1px solid var(--rule)}
.note:last-child{border-bottom:0;margin-bottom:0}
.note h2{font-size:14.5px;line-height:1.65;margin:0;font-weight:700;color:var(--ink)}
.note p{margin:0}

/* ---- footer --------------------------------------------------------- */
.foot{display:flex;align-items:center;gap:24px;margin-top:80px;padding:22px 0 32px;
      border-top:1px solid var(--rule);color:var(--ink-faint);font-size:13px}
.foot .brand .mark{height:20px}
.foot .brand .word{height:20px;top:2px}
.foot .brand{color:var(--ink-dim)}
/* the company's channels, as icons in the menu's grey */
.social{display:flex;align-items:center;gap:22px;margin-left:auto}
.social a{display:block;color:var(--menu-ink);padding:2px}
.social a:hover{color:var(--ink)}
.social svg{width:20px;height:20px;display:block}
.foot .copy{margin-left:12px}

/* ---- narrow: the terminal's stacked layout ------------------------- */
@media (max-width:900px){
  .planes{grid-template-columns:1fr;row-gap:20px}
  .ws .plane{border-right:1px solid var(--plane-border);border-radius:14px;min-height:0}
  .out .plane{border-radius:14px;min-height:0}
  .note{grid-template-columns:1fr;gap:4px}
}
@media (max-width:560px){
  .wrap{padding:0 16px}
  .bar{height:64px;gap:16px}
  .brand .mark,.brand .word{height:22px}
  .brand{gap:9px}
  h1{font-size:23px}
  .lede{font-size:15px}
  .intro{padding:30px 0 48px}
  .plane{padding:16px 14px 18px;font-size:13px}
  .kv{margin-left:18px}
  .prompt{flex-wrap:wrap;padding:10px 10px 10px 14px}
  .prompt input{flex-basis:70%}
  .go{width:100%;justify-content:center}
  .foot{flex-wrap:wrap;gap:18px}
  .social{gap:20px}
  .foot .copy{flex-basis:100%;margin-left:0}
}