/* the actual.inc language: black, Forma DJR Deck light, Berkeley Mono, the orbit navigation, the striped band, red
   line-art in 240x120 frames, light-blue inputs with the floating-label border, blue pill buttons, 24px cards with
   1px white/20 borders, slanted links */
@font-face { font-family: "Forma DJR Deck"; src: url("fonts/FormaDJRVariable.woff2") format("woff2"); font-weight: 100 900; font-stretch: 75% 125%; font-display: swap; }
@font-face { font-family: "Berkeley Mono"; src: url("fonts/BerkeleyMonoVariable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  color-scheme: dark;
  --bg: #000000;
  --fg: #99999e;
  --fg-80: rgb(255 255 255 / 0.8);
  --fg-56: rgb(255 255 255 / 0.56);
  --fg-48: rgb(255 255 255 / 0.48);
  --line-24: rgb(255 255 255 / 0.24);
  --line-20: rgb(255 255 255 / 0.2);
  --line-10: rgb(255 255 255 / 0.1);
  --ring: rgb(255 255 255 / 0.16);
  --ring-grad: #ffffff;
  --blue: #1586d6;
  --blue-32: rgb(21 134 214 / 0.32);
  --blue-50: rgb(21 134 214 / 0.5);
  --button: #003c85;
  --button-fg: rgb(255 255 255 / 0.72);
  --lime: #bdc914;
  --lime-fg: #01010e;
  --link: #7a7a7a;
  --link-hover: #cccccc;
  --closing-link: #2337ae;
  --closing-link-hover: #3d55db;
  --red: #9e0800;
  --band-line: rgb(99 53 0 / 0.5);
  --band-text: #ece8d7;
  --t0: rgb(21 134 214 / 0.30); --t1: rgb(108 22 217 / 0.38); --t2: rgb(61 161 115 / 0.32);
  --t3: rgb(201 123 20 / 0.34); --t4: rgb(188 43 43 / 0.34); --t5: rgb(189 201 20 / 0.24);
  --sans: "Forma DJR Deck", ui-sans-serif, system-ui, sans-serif;
  --mono: "Berkeley Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #e3e3e3; --fg: #56565a; --fg-80: rgb(0 0 0 / 0.8); --fg-56: rgb(0 0 0 / 0.56); --fg-48: rgb(0 0 0 / 0.48);
    --line-24: rgb(0 0 0 / 0.24); --line-20: rgb(0 0 0 / 0.2); --line-10: rgb(0 0 0 / 0.1); --ring: rgb(0 0 0 / 0.16); --ring-grad: #000000;
    --link: #888888; --link-hover: #2d2d2d; --band-text: #1b1b1f;
    --t0: #c7d2fe; --t1: #e9d5ff; --t2: #bbf7d0; --t3: #fde68a; --t4: #fecaca; --t5: #e9ecb0;
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #e3e3e3; --fg: #56565a; --fg-80: rgb(0 0 0 / 0.8); --fg-56: rgb(0 0 0 / 0.56); --fg-48: rgb(0 0 0 / 0.48);
  --line-24: rgb(0 0 0 / 0.24); --line-20: rgb(0 0 0 / 0.2); --line-10: rgb(0 0 0 / 0.1); --ring: rgb(0 0 0 / 0.16); --ring-grad: #000000;
  --link: #888888; --link-hover: #2d2d2d; --band-text: #1b1b1f;
  --t0: #c7d2fe; --t1: #e9d5ff; --t2: #bbf7d0; --t3: #fde68a; --t4: #fecaca; --t5: #e9ecb0;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--bg); color: var(--fg); font-family: var(--sans); font-weight: 300; font-optical-sizing: auto;
  letter-spacing: 0.02em; font-size: 18px; line-height: 24px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }
a { color: var(--link); text-decoration: none; transition: color 150ms; }
a:hover { color: var(--link-hover); }
.subtle-italic { font-variation-settings: "slnt" -10; }
button { font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.link { color: var(--link); transition: color 150ms; }
.link:hover, .link[aria-pressed="true"] { color: var(--link-hover); }

/* ---- the orbit navigation (desktop), the landing's left and right rings ---- */
.orbit { position: absolute; top: 16px; width: 404px; height: 153px; display: none; z-index: 5; }
.orbit-left { left: 24px; }
.orbit-right { right: 24px; width: 240px; }
.orbit .ring-outer { position: absolute; top: 0; left: -60px; }
.orbit .ring-inner { position: absolute; top: 46px; left: 62px; }
.orbit-right .ring-inner { left: 40px; }
.orbit-link { position: absolute; white-space: nowrap; font-size: 22px; line-height: 24px; font-weight: 360; letter-spacing: 0.44px;
  font-variation-settings: "slnt" -12; color: var(--link); -webkit-text-stroke: 2px var(--bg); paint-order: stroke fill; }
.orbit-link:hover { color: var(--link-hover); }
.orbit-link.is-here { color: var(--fg-80); }
.navbar { display: flex; flex-wrap: wrap; gap: 18px; padding: 22px 16px 0; font-size: 20px; font-weight: 360; font-variation-settings: "slnt" -12; letter-spacing: 0.44px; }
.navbar a[aria-current] { color: var(--fg-80); }
@media (min-width: 900px) { .orbit { display: block; } .navbar { display: none; } }

main { max-width: 1120px; margin: 0 auto; padding: 0 16px 40px; }
@media (min-width: 640px) { main { padding-left: 24px; padding-right: 24px; } }

/* ---- hero ---- */
.hero { display: grid; gap: 36px; padding: 48px 0 40px; }
@media (min-width: 900px) { .hero { grid-template-columns: minmax(0, 1fr) 360px; align-items: end; padding: 150px 0 56px; gap: 64px; } }
h1 { font-weight: 320; font-size: 32px; line-height: 38px; margin: 0; color: var(--fg-80); letter-spacing: 0.04em; }
@media (min-width: 900px) { h1 { font-size: 44px; line-height: 50px; } }
.sub { color: var(--fg-48); font-size: 19px; line-height: 26px; margin: 18px 0 0; max-width: 620px; }
@media (min-width: 900px) { .sub { font-size: 22px; line-height: 30px; } }
.art, .feature { margin: 0; }
.art svg, .feature svg { display: block; width: 100%; height: auto; stroke: var(--red); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.art svg { max-width: 360px; }
.art figcaption, .feature figcaption { margin-top: 12px; color: var(--fg-48); font-size: 17px; line-height: 23px; max-width: 360px; }

/* ---- the striped band: a live readout, like the landing's install line ---- */
.band-wrap { margin: 0 calc(50% - 50vw); padding: 0; }
.band { position: relative; height: 46px; border-top: 1px solid var(--line-24); display: flex; align-items: center; justify-content: center; padding: 1px 16px 0;
  background: repeating-linear-gradient(to bottom, var(--band-line) 0, var(--band-line) 1px, transparent 1px, transparent 5px); }
.band-text { position: relative; font-family: var(--mono); font-size: 15px; line-height: 20px; color: var(--band-text); letter-spacing: 0; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  -webkit-text-stroke: 3px var(--bg); paint-order: stroke fill; }
@media (min-width: 640px) { .band-text { font-size: 16px; } }
.band-caption { margin: 8px 0 0; text-align: center; color: var(--fg-56); font-size: 16px; line-height: 20px; letter-spacing: 0.04em; padding: 0 16px; }

/* ---- picker ---- */
.picker { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 64px 0 26px; }
@media (min-width: 768px) { .picker { grid-template-columns: 120px minmax(0, 1fr); align-items: baseline; } }
.picker h2 { margin: 0; font-weight: 300; font-size: 16px; line-height: 20px; color: var(--fg-48); }
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pill { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 1px 12px 0; border-radius: 999px;
  border: 1px solid var(--line-20); color: var(--fg-56); font-size: 17px; line-height: 1; text-transform: lowercase;
  transition: border-color 150ms, color 150ms, background-color 150ms; }
.pill .sz { font-family: var(--mono); font-size: 11px; color: var(--fg-48); }
.pill:hover { border-color: var(--fg-48); color: var(--fg-80); }
.pill[aria-pressed="true"] { background: var(--button); border-color: var(--button); color: var(--button-fg); }
.pill[aria-pressed="true"] .sz { color: var(--button-fg); }
.pill.loading { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.55; } }

/* ---- the editor: the Box with its floating label ---- */
.box { position: relative; border: 1px solid var(--blue-32); border-radius: 24px; margin-top: 14px; }
.box-label { position: absolute; top: -11px; left: 20px; padding: 0 6px; background: var(--bg); color: var(--fg); font-size: 18px; line-height: 120%; font-weight: 360; }
.toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding: 18px 20px 6px; font-size: 16px; }
.toolbar .lbl { color: var(--fg-48); margin-right: 6px; }
.samples button { color: var(--link); margin-right: 12px; text-transform: lowercase; font-variation-settings: "slnt" -10; transition: color 150ms; }
.samples button:hover { color: var(--link-hover); }
.opts { display: flex; align-items: center; gap: 16px; color: var(--fg-48); }
.opts label { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.opts input { accent-color: var(--button); width: 14px; height: 14px; margin: 0; }
textarea { display: block; width: 100%; min-height: 180px; resize: vertical; border: 0; outline: 0; background: transparent;
  padding: 8px 20px 12px; font-family: var(--mono); font-size: 16px; line-height: 1.55; font-weight: 400; color: var(--blue); caret-color: var(--fg); letter-spacing: 0; }
textarea::placeholder { color: var(--blue-50); }
.status { padding: 10px 20px 14px; border-top: 1px solid var(--line-10); color: var(--fg-48); font-size: 14px; line-height: 18px; font-family: var(--mono); letter-spacing: 0; }
.status.err { color: #ff4fe5; }

/* ---- cards ---- */
.card { border: 1px solid var(--line-20); border-radius: 24px; margin-top: 24px; overflow: hidden; }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .stats { grid-template-columns: repeat(5, minmax(0, 1fr)); } .cell.big { grid-column: span 2; } }
@media (min-width: 1024px) { .stats { grid-template-columns: repeat(10, minmax(0, 1fr)); } }
.cell { padding: 16px 18px 18px; border-bottom: 1px solid var(--line-10); border-right: 1px solid var(--line-10); min-width: 0; }
.cell .k { display: block; color: var(--fg-48); font-size: 13px; line-height: 16px; }
.cell .v { display: block; margin-top: 6px; color: var(--fg-80); font-size: 26px; line-height: 1; letter-spacing: 0.01em; white-space: nowrap; }
.cell .v.long { font-size: 20px; margin-top: 9px; }
.cell.big .v { font-size: 44px; }
.cell.accent.big .v { font-size: 38px; }
.cell.accent .v { color: var(--blue); }
.scope { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr; gap: 6px; padding: 14px 18px 12px; border-bottom: 1px solid var(--line-10); }
.scope .k { color: var(--fg-48); font-size: 13px; line-height: 16px; }
.scope svg { width: 100%; height: 44px; display: block; }
.scope path.area { fill: var(--blue); fill-opacity: 0.12; }
.scope path.line { fill: none; stroke: var(--blue); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.more { grid-column: 1 / -1; }
.more summary { list-style: none; cursor: pointer; padding: 14px 18px; color: var(--link); font-size: 16px; line-height: 20px; transition: color 150ms; }
.more summary::-webkit-details-marker { display: none; }
.more summary::before { content: "▶"; font-size: 10px; margin-right: 10px; display: inline-block; transition: transform 150ms; vertical-align: 1px; }
.more[open] summary::before { transform: rotate(90deg); }
.more summary:hover { color: var(--link-hover); }
.more dl { margin: 0; padding: 4px 18px 18px; border-top: 1px solid var(--line-10); display: grid; gap: 14px; }
.more dl div { display: grid; gap: 2px; }
@media (min-width: 768px) { .more dl div { grid-template-columns: 120px minmax(0, 1fr); gap: 16px; } }
.more dt { color: var(--fg-48); font-size: 13px; line-height: 16px; padding-top: 3px; }
.more dd { margin: 0; color: var(--fg-80); font-size: 15px; line-height: 21px; }
.card-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line-10); }
.card-head .k { color: var(--fg-48); font-size: 13px; line-height: 16px; }
.views { display: flex; gap: 14px; font-size: 16px; }
.tokens { padding: 16px 18px 18px; min-height: 64px; font-family: var(--mono); font-size: 14px; line-height: 2; font-weight: 400;
  letter-spacing: 0; color: var(--fg-80); white-space: pre-wrap; word-break: break-word; }
.tk { border-radius: 4px; padding: 1px 0; margin: 0 1px; cursor: default; }
.tk.c0 { background: var(--t0); } .tk.c1 { background: var(--t1); } .tk.c2 { background: var(--t2); }
.tk.c3 { background: var(--t3); } .tk.c4 { background: var(--t4); } .tk.c5 { background: var(--t5); }
.tk.sp { background: var(--lime); color: var(--lime-fg); padding: 1px 5px; }
.tk:hover { outline: 2px solid var(--blue); outline-offset: 0; }
.tk .nl { opacity: 0.45; }
.ids .tk { padding: 1px 6px; }
.note { padding: 0 18px 14px; color: var(--fg-48); font-size: 14px; line-height: 18px; }

/* ---- the three features, red line-art like the landing's ---- */
.features { display: grid; gap: 48px 40px; padding: 120px 0 40px; }
@media (min-width: 900px) { .features { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 160px 0 60px; } .feature:nth-child(2) { margin-top: -56px; } .feature:nth-child(3) { margin-top: 40px; } }
.feature svg { max-width: 300px; }
.feature figcaption { max-width: 300px; }

/* ---- the closing statement, like the landing's bottom ---- */
.closing { padding: 96px 0 24px; }
.closing h2 { margin: 0; font-weight: 320; font-size: 28px; line-height: 31px; letter-spacing: 0.04em; color: var(--fg-80); }
@media (min-width: 900px) { .closing h2 { font-size: 40px; line-height: 48px; } }
.closing-body { border-top: 1px solid var(--line-24); margin-top: 16px; padding-top: 24px; display: grid; gap: 24px; }
@media (min-width: 900px) { .closing-body { grid-template-columns: 240px minmax(0, 560px); } }
.closing-links { display: flex; gap: 24px; }
.closing-links a { font-size: 24px; line-height: 29px; font-weight: 320; letter-spacing: 0.04em; color: var(--closing-link); white-space: nowrap; }
.closing-links a:hover { color: var(--closing-link-hover); }
.closing p { margin: 0; color: var(--fg-48); font-size: 18px; line-height: 24px; }
@media (min-width: 900px) { .closing p { font-size: 22px; line-height: 30px; } }

footer { max-width: 1120px; margin: 48px auto 0; padding: 18px 16px 40px; border-top: 1px solid var(--line-20); color: var(--fg-48); font-size: 14px; line-height: 20px; }
@media (min-width: 640px) { footer { padding-left: 24px; padding-right: 24px; } }