/* Lavabit design pass, v2 ("lava meets water"). Opt in per page with body.v2; the About page goes first.
   One accent: a cool sky blue. On v2 pages the old ember tokens point at it too, so nothing stays orange.
   Hand-drawn touches are inline SVG, so the strict CSP (img-src 'self' data:) still holds. */

@font-face { font-family: "Fraunces"; src: url(../vendor/fonts/fraunces-var.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url(../vendor/fonts/fraunces-var-italic.woff2) format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url(../vendor/fonts/schibsted-grotesk-var.woff2) format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url(../vendor/fonts/schibsted-grotesk-var-italic.woff2) format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }

/* ---------- Tokens: warm stone, cool water ---------- */
html:has(body.v2) {
  --bg: #1c1a18; --bg-side: #171513; --surface: #23201e; --surface-2: #2b2825; --surface-3: #35312d;
  --line: #34302c; --line-strong: #4a443e;
  --text: #ece6dc; --text-2: #bdb5aa; --text-3: #8d857b;
  --sky: #9cc9db; --sky-2: #c4e1ec; --sky-soft: rgba(156, 201, 219, 0.11); --sky-line: rgba(156, 201, 219, 0.42);
  --focus: #9cc9db; --selection: rgba(156, 201, 219, 0.26);
  --sky-deep: #6fa3b8;
  /* The old accent, retired: anything still asking for ember (logo, live states, the model) gets the sky. */
  --ember: var(--sky); --ember-2: var(--sky-deep); --ember-soft: var(--sky-soft); --ember-line: var(--sky-line);
  --font: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='6' viewBox='0 0 64 6'%3E%3Cpath d='M0 3.4C3.5 1.6 6.8 1.2 10.4 3.1S17 5 21 3.2 27.4.9 31.6 2.8 38 5.1 42.3 3.4 48.8 1.3 53 3.1 59.6 4.9 64 3.2' fill='none' stroke='%239cc9db' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
}
html[data-theme="light"]:has(body.v2) {
  --bg: #f1f2ef; --bg-side: #e8eae6; --surface: #fbfbf9; --surface-2: #ebece8; --surface-3: #e1e3de;
  --line: #d9dbd5; --line-strong: #c3c6bf;
  --text: #1f1d1b; --text-2: #4d4944; --text-3: #7a756e;
  --sky: #2d6b85; --sky-2: #1f4f63; --sky-soft: rgba(45, 107, 133, 0.09); --sky-line: rgba(45, 107, 133, 0.4);
  --focus: #2d6b85; --selection: rgba(45, 107, 133, 0.18);
  --sky-deep: #1f4f63;
  --ember: var(--sky); --ember-2: var(--sky-deep); --ember-soft: var(--sky-soft); --ember-line: var(--sky-line);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='6' viewBox='0 0 64 6'%3E%3Cpath d='M0 3.4C3.5 1.6 6.8 1.2 10.4 3.1S17 5 21 3.2 27.4.9 31.6 2.8 38 5.1 42.3 3.4 48.8 1.3 53 3.1 59.6 4.9 64 3.2' fill='none' stroke='%232d6b85' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]):has(body.v2) {
    --bg: #f1f2ef; --bg-side: #e8eae6; --surface: #fbfbf9; --surface-2: #ebece8; --surface-3: #e1e3de;
    --line: #d9dbd5; --line-strong: #c3c6bf;
    --text: #1f1d1b; --text-2: #4d4944; --text-3: #7a756e;
    --sky: #2d6b85; --sky-2: #1f4f63; --sky-soft: rgba(45, 107, 133, 0.09); --sky-line: rgba(45, 107, 133, 0.4);
    --focus: #2d6b85; --selection: rgba(45, 107, 133, 0.18);
    --sky-deep: #1f4f63;
    --ember: var(--sky); --ember-2: var(--sky-deep); --ember-soft: var(--sky-soft); --ember-line: var(--sky-line);
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='6' viewBox='0 0 64 6'%3E%3Cpath d='M0 3.4C3.5 1.6 6.8 1.2 10.4 3.1S17 5 21 3.2 27.4.9 31.6 2.8 38 5.1 42.3 3.4 48.8 1.3 53 3.1 59.6 4.9 64 3.2' fill='none' stroke='%232d6b85' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
  }
}

/* Shapes used as masks, so they take whatever colour the theme gives them. */
html:has(body.v2) {
  --m-rule: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='8' viewBox='0 0 420 8'%3E%3Cpath d='M1 4.6C40 3.2 72 5.4 118 4.1S190 2.9 236 4.5 318 5.6 362 3.9 402 3.6 419 4.4' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  --m-column: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='18' viewBox='0 0 14 18'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M1.4 4.2 4 1.6h6.1l2.5 2.6-2.6 2.5H3.9z'/%3E%3Cpath d='M1.4 4.2v9.4l2.6 2.8h6l2.6-2.7V4.2M3.9 6.7v9.6M10 6.7v9.6'/%3E%3C/g%3E%3C/svg%3E");
  --m-dash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='6' viewBox='0 0 12 6'%3E%3Cpath d='M1 3.6C3.4 2.4 6.2 2.6 8 3.1s2.2.3 3-.4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  --m-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='26' viewBox='0 0 46 26'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M44 4C34 2.6 22 5 14 11.5 9.6 15 6.8 18.6 4.6 23'/%3E%3Cpath d='M3.6 15.8 4.5 23.4l6.6-3.6'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- Page ---------- */
body.v2 { background-color: var(--bg); background-image: var(--grain); font-size: 15px; }
body.v2 ::selection { background: var(--selection); }
body.v2 :focus-visible { outline-color: var(--sky); }

.v2 .brand__name { font-family: var(--serif); font-weight: 600; font-size: 19px; letter-spacing: -0.01em; font-variation-settings: "SOFT" 100, "opsz" 24; }
.v2 .hub-nav[aria-current="page"] { color: var(--sky); }
.v2 .hub-foot { border-top: 0; position: relative; }
.v2 .hub-foot::before { content: ""; position: absolute; inset: 0 0 auto; height: 8px; background: var(--line-strong);
  -webkit-mask: var(--m-rule) repeat-x 0 0 / 420px 8px; mask: var(--m-rule) repeat-x 0 0 / 420px 8px; }
.v2 .hub-foot__link:hover { color: var(--sky); }
.v2 .foot-stamp { font-family: var(--mono); font-size: 12px; }

/* Links: a hand-drawn wavy line instead of a ruler-straight underline. */
.v2 .about__link, .v2 .about__p a, .v2 .about__cols a {
  color: var(--sky); text-decoration: none; padding-bottom: 3px;
  background: var(--squiggle) repeat-x 0 100% / 64px 6px; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.v2 .about__link:hover { color: var(--sky-2); }

/* ---------- About ---------- */
.v2 .about__head { border-bottom: 0; position: relative; padding-top: 56px; }
.v2 .about__section { border-bottom: 0; position: relative; }
.v2 .about__head::after, .v2 .about__section:not(:last-child)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: var(--line-strong);
  -webkit-mask: var(--m-rule) repeat-x 0 0 / 420px 8px; mask: var(--m-rule) repeat-x 0 0 / 420px 8px;
}
.v2 .about__section:nth-child(odd)::after { -webkit-mask-position: 173px 0; mask-position: 173px 0; }

.v2 .about__kicker { font: italic 500 18px/1.2 var(--serif); letter-spacing: 0; text-transform: none; color: var(--sky);
  font-variation-settings: "SOFT" 100, "opsz" 18; margin-bottom: 12px; }
.v2 .about__title { font-family: var(--serif); font-weight: 560; font-size: clamp(34px, 5.4vw, 54px); line-height: 1.06;
  letter-spacing: -0.015em; max-width: 19ch; font-variation-settings: "SOFT" 100, "WONK" 0, "opsz" 72; }
.v2 .about__lede { font-size: 18px; line-height: 1.6; max-width: 58ch; }

.v2 .about__live dt { font-size: 13px; }
.v2 .about__live dd { color: var(--sky); font-size: 16px; }
.v2 .about__live-wide dd { color: var(--text); font-size: 14px; }

.v2 .about__h2 { font-family: var(--serif); font-weight: 600; font-size: 27px; line-height: 1.15; letter-spacing: -0.01em;
  font-variation-settings: "SOFT" 100, "opsz" 36; display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.v2 .about__h2::before { width: 14px; height: 18px; margin: 0; border-radius: 0; flex: none; background: var(--sky);
  -webkit-mask: var(--m-column) no-repeat center / contain; mask: var(--m-column) no-repeat center / contain; }

.v2 .about__p, .v2 .about__cols p, .v2 .about__list li { font-size: 16px; line-height: 1.7; }
.v2 .about__list li { padding-left: 26px; }
.v2 .about__list li::before { left: 0; top: 0.72em; width: 14px; height: 7px; border-radius: 0; box-shadow: none;
  background: var(--sky); -webkit-mask: var(--m-dash) no-repeat center / contain; mask: var(--m-dash) no-repeat center / contain; }

/* Notes in the margin: the site's own voice, in the serif italic, with a hand-drawn arrow back to what they're about. */
.about__headrow { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; }
.about__headrow .about__h2 { margin-bottom: 18px; }
.note { position: relative; margin: 0 0 20px; max-width: 26ch; padding-left: 52px;
  font: italic 400 16.5px/1.35 var(--serif); font-variation-settings: "SOFT" 100, "opsz" 16; color: var(--sky);
  transform: rotate(-1.6deg); transform-origin: left bottom; }
.note::before { content: ""; position: absolute; left: 0; bottom: -6px; width: 46px; height: 26px; background: var(--sky);
  -webkit-mask: var(--m-arrow) no-repeat center / contain; mask: var(--m-arrow) no-repeat center / contain; }

/* ---------- Diagram ---------- */
.v2 .about__figure { border: 0; background: var(--surface); position: relative; border-radius: 22px 18px 24px 16px / 16px 22px 18px 24px;
  box-shadow: inset 0 0 0 1px var(--line); }
.v2 .about-diagram .d-flow { stroke: var(--sky); }
.v2 .about-diagram .d-zone { stroke: var(--text-3); stroke-dasharray: none; stroke-width: 1.2; opacity: 0.55; }
.v2 .about-diagram .d-zone-label { font: italic 400 13.5px var(--serif); fill: var(--sky); }
.v2 .about-diagram .d-row { font: italic 400 12.5px var(--serif); fill: var(--text-3); }
.v2 .about-diagram .d-note { font: italic 400 13px var(--serif); fill: var(--text-2); }
.v2 .about-diagram .d-name { font-family: var(--font); }
.v2 .about-diagram .d-svc { font-family: var(--font); }
.v2 .about-diagram .d-sub { font-family: var(--font); }
.v2 .about-diagram.is-asleep .d-gpu { stroke: var(--text-3); }
/* The GPU box's top: a quiet tint and a blue rim when the model is loaded, just the rim when the box is
   awake but idle, plain stone when it's asleep. */
.v2 .about-diagram .d-gpu-col .f-ember { fill: color-mix(in srgb, var(--sky) 26%, var(--a-top)); stroke: var(--sky); stroke-width: 1.6; }
.v2 .about-diagram.is-idle .d-gpu-col .f-ember { fill: var(--a-top); }
.v2 .about-diagram.is-asleep .d-gpu-col .f-ember { fill: var(--a-top); stroke: var(--a-line); }

@media (max-width: 900px) {
  .v2 .about__head { padding-top: 32px; }
  .note { margin-bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) { .note { transform: none; } }

/* ======================================================================
   The rest of the gate: hub, tool pages, startpage, sign-in and sign-out
   ====================================================================== */

/* Small section labels: the serif, in sentence case, with the little basalt column instead of a square. */
.v2 .cards-section__title, .v2 .sp-group__title, .v2 .sp-panel__title {
  font-family: var(--serif); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text);
  font-variation-settings: "SOFT" 100, "opsz" 20; display: flex; align-items: center; gap: 9px;
}
.v2 .cards-section__title { font-size: 21px; margin-bottom: 16px; }
.v2 .sp-group__title, .v2 .sp-panel__title { font-size: 16.5px; }
.v2 .cards-section__title::before, .v2 .sp-group__title::before, .v2 .sp-panel__title::before {
  content: ""; display: block; width: 11px; height: 14px; margin: 0; border-radius: 0; flex: none; vertical-align: 0;
  background: var(--sky); -webkit-mask: var(--m-column) no-repeat center / contain; mask: var(--m-column) no-repeat center / contain;
}

/* Big titles get the serif too. */
.v2 .intro__title, .v2 .tool__title, .v2 .auth__step h1 {
  font-family: var(--serif); font-weight: 560; letter-spacing: -0.015em; font-variation-settings: "SOFT" 100, "opsz" 72;
}
.v2 .intro__title { line-height: 1.04; }
.v2 .tool__title { font-variation-settings: "SOFT" 100, "opsz" 36; }

/* Straight 1px dividers become the same gently uneven rule as the About page. */
.v2 .tool__head { border-bottom: 0; position: relative; }
.v2 .tool__head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: var(--line-strong);
  -webkit-mask: var(--m-rule) repeat-x 0 0 / 420px 8px; mask: var(--m-rule) repeat-x 0 0 / 420px 8px;
}

/* Form controls follow the accent. */
.v2 .field input[type="range"], .v2 .checks input { accent-color: var(--sky); }

/* Startpage details. */
.v2 .sp-week { text-transform: none; letter-spacing: 0; font-family: var(--mono); font-weight: 500; color: var(--sky); border-color: var(--sky-line); }
.v2 .sp-credit a, .v2 .auth__back a { text-decoration: none; padding-bottom: 3px;
  background: var(--squiggle) repeat-x 0 100% / 64px 6px; }

/* Buttons on the accent: dark text on the light blue, light text on the deep blue of the light theme. */
html:has(body.v2) { --on-sky: #10202a; }
html[data-theme="light"]:has(body.v2) { --on-sky: #ffffff; }
@media (prefers-color-scheme: light) { html:not([data-theme="dark"]):has(body.v2) { --on-sky: #ffffff; } }
.v2 .btn.is-live, .v2.hub-page .btn--primary, .v2.auth-page .btn--primary, .v2 .composer.is-live .send { color: var(--on-sky); }
.v2 .auth__brand { font-family: var(--serif); font-weight: 600; font-size: 18px; font-variation-settings: "SOFT" 100, "opsz" 24; }

/* The logo: a hexagon with a prompt in it. The rim and cursor are the accent, the ">" is the text colour.
   When a page opens, the cursor blinks twice and then stays put (not at all for people who ask for less motion). */
.v2 .mark { color: var(--text); }
@media (prefers-reduced-motion: no-preference) {
  .v2 .brand .mark, .v2 .auth__brand .mark { animation: mark-wake 1.5s steps(1, end) 0.35s 1 both; }
  @keyframes mark-wake { 0% { --mark-cursor: 1; } 20% { --mark-cursor: 0; } 40% { --mark-cursor: 1; } 60% { --mark-cursor: 0; } 80%, 100% { --mark-cursor: 1; } }
}

/* ======================================================================
   Chat and Prospekt (they carry an identical copy of this file as v2.css)
   ====================================================================== */
html:has(body.v2) { --bubble: #2f2b28; --code-bg: #161412; --scrim: rgba(12, 10, 9, 0.6); }
html[data-theme="light"]:has(body.v2) { --bubble: #e4e5e0; --code-bg: #f8f8f5; --scrim: rgba(31, 29, 27, 0.35); }
@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]):has(body.v2) { --bubble: #e4e5e0; --code-bg: #f8f8f5; --scrim: rgba(31, 29, 27, 0.35); }
}
.v2 .welcome__title, .v2 .empty__title, .v2 .run__title, .v2 .report__title {
  font-family: var(--serif); font-weight: 560; letter-spacing: -0.01em; font-variation-settings: "SOFT" 100, "opsz" 48;
}
.v2 .md h1, .v2 .md h2, .v2 .md h3 { font-family: var(--serif); font-weight: 600; font-variation-settings: "SOFT" 100, "opsz" 28; letter-spacing: -0.005em; }
.v2 .md a { color: var(--sky); }
.v2 .pk-side__title { font-family: var(--serif); font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 16px;
  color: var(--text); font-variation-settings: "SOFT" 100, "opsz" 20; }
.v2 .block__title { font-family: var(--serif); font-weight: 600; font-size: 17px; font-variation-settings: "SOFT" 100, "opsz" 20; }

/* ---------- Small pieces shared by the gate pages ---------- */

/* The contact address, shown only on request. Looks like a link until it becomes one. */
.reveal-mail { padding: 0 0 3px; border: 0; background: var(--squiggle) repeat-x 0 100% / 64px 6px; color: var(--sky);
  font: inherit; cursor: pointer; }
.reveal-mail:hover { color: var(--sky-2); }

/* Inbox in the header, with the number of unread messages. */
.hub-inbox { gap: 7px; }
.hub-inbox__count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; display: inline-grid; place-items: center;
  background: var(--sky); color: var(--on-sky); font: 600 11px/1 var(--mono); }

/* The footer on the sign-in and sign-out pages too: stack it under the centred box. */
.v2.auth-page { flex-direction: column; }
.v2.auth-page .hub-foot { flex: none; }

/* The big IP address: sized to the space it has, so a full IPv4 address never wraps.
   (Plex Mono is ~0.6em per character; 15 characters plus the copy button fit with 100cqi / 9.6.) */
.v2 .conn { container-type: inline-size; }
.v2 .conn__ip { font-size: clamp(26px, calc((100cqi - 56px) / 9.6), 68px); white-space: nowrap; letter-spacing: -0.02em; }
.v2 .conn__ip.is-long { font-size: clamp(17px, calc((100cqi - 56px) / 24), 40px); white-space: normal; overflow-wrap: anywhere; }

/* ---------- Site navigation: the same links in every header ---------- */
.site-nav { display: flex; align-items: center; gap: 2px; margin: 0 auto 0 22px; min-width: 0; }
.site-nav__link { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 9px;
  color: var(--text-2); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: color .15s, background .15s; }
.site-nav__link:hover { color: var(--text); background: var(--surface-2); }
.site-nav__link[aria-current="page"] { color: var(--sky); }
.site-nav__lock { width: 12px; height: 12px; fill: none; stroke: currentColor; opacity: .6; }
html.is-signed-in .site-nav__lock, .app .site-nav__lock { display: none; }   /* locks only mean something when signed out */
.hub-top { gap: 12px; }

/* Prospekt: the nav sits next to the logo in its top bar. */
.pk-top .site-nav { margin-left: 14px; }

/* Chat: the links sit in the top bar, between the chat's title and the settings button.
   On phones the top bar has no room, so they move into the sidebar drawer instead. */
.site-nav--top { margin: 0 4px 0 0; flex: none; }
.site-nav--side { display: none; }
@media (max-width: 760px) {
  .site-nav--top { display: none; }
  .site-nav--side { display: flex; flex-wrap: wrap; margin: 6px 0 4px; padding: 10px 2px 0; border-top: 1px solid var(--line); }
}

/* Narrow screens: the links get their own row under the logo, and scroll sideways if they must. */
@media (max-width: 760px) {
  .hub-top, .pk-top { flex-wrap: wrap; height: auto; row-gap: 0; padding-bottom: 6px; }
  .hub-top .site-nav, .pk-top .site-nav { order: 3; width: 100%; margin: 0 -11px; overflow-x: auto; scrollbar-width: none; }
  .pk-top__left { flex-wrap: wrap; }
}