/* Howtiva v0.3 — midnight teal, layered light, restrained and accessible.
   No external font/image requests; all effects are CSS.  */
:root {
  color-scheme: dark;
  --ink:#edfaff;
  --muted:#b5ccd9;
  --line:rgba(119,210,230,.20);
  --paper:#061421;
  --cream:#071f30;
  --accent:#3ee0df;
  --soft:#0d3440;
  --mint:#0c3340;
  --shadow:0 24px 58px rgba(0,5,15,.30);
}
html {scroll-padding-top:92px}
body {
  color:var(--ink);
  background-color:#061421;
  background-image:
   radial-gradient(ellipse 65% 49% at 110% 0%,rgba(0,159,180,.19),transparent 75%),
   radial-gradient(ellipse 45% 44% at -10% 23%,rgba(8,117,172,.20),transparent 75%),
   radial-gradient(ellipse 50% 45% at 105% 65%,rgba(5,127,148,.12),transparent 76%),
   linear-gradient(112deg,#061421 0%,#09243a 48%,#061625 100%);
  background-attachment:fixed;
}
body::before {
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 12%,rgba(19,99,123,.06) 56%,transparent 86%);
}
::selection {background:#177e8b;color:#fff}
/* Navigation and brand */
.vht-header {
 background:linear-gradient(110deg,rgba(3,17,31,.96),rgba(7,41,57,.94));
 border-color:rgba(80,199,217,.22);
 backdrop-filter:blur(16px);
 position:sticky;top:0;
}
.vht-header__inner {min-height:78px}
.vht-brand__logo {background:linear-gradient(135deg,#00aebc,#064566);box-shadow:0 0 22px rgba(0,205,209,.18)}
.vht-brand__words strong {font-size:21px;letter-spacing:-.045em;color:#f2fbff}
.vht-brand__words small {color:#88acb9}
.vht-nav__links a {color:#e4f5fa}
.vht-nav__links a:hover,.vht-footer__nav a:hover {color:#65ebe6}
.vht-header-search {background:rgba(31,86,104,.30);border-color:rgba(126,211,224,.24);border-radius:999px;height:43px;max-width:235px}
.vht-header-search input {color:#e8faff;width:174px}
.vht-header-search input::placeholder,.vht-hero__search input::placeholder {color:#a7c1ce;opacity:1}
.vht-header-search button {color:#b7f6fc}
.vht-kicker,.vht-article__eyebrow,.vht-promise__badge {color:#57e4de}
/* Homepage: continuous depth, not a white stripe beneath the hero */
.vht-hero {background:linear-gradient(130deg,rgba(6,32,54,.65),rgba(9,63,78,.30) 58%,rgba(5,33,54,.42));border-color:rgba(85,179,210,.18)}
.vht-hero__grid {min-height:530px}
.vht-hero h1 {color:#f4fbff}
.vht-hero h1 em,.vht-promise h2 em {color:#44e3dc}
.vht-hero p {color:#b8cfd9}
.vht-hero__search {background:rgba(9,40,59,.93);border-color:rgba(112,208,220,.33);box-shadow:0 17px 48px rgba(0,6,18,.29)}
.vht-hero__search input {background:transparent;color:#f2fcff}
.vht-hero__search button {background:linear-gradient(120deg,#007b8c,#009fa6)}
.vht-hero__search button:hover {background:#06a0a4}
.vht-hero__meta {color:#b3d5db}
.vht-hero__card {
 background:linear-gradient(145deg,rgba(16,58,76,.95),rgba(6,29,47,.98));
 border:1px solid rgba(115,223,232,.30);box-shadow:24px 29px 0 rgba(16,87,105,.19),0 20px 65px rgba(0,9,19,.45);
 transform:none;color:#ebfbff;
}
.vht-hero__card>span {color:#8fd5da}
.vht-art__row {border-color:rgba(148,222,226,.14)}
.vht-art__row b,.vht-art__row div {background:#154556;color:#70f2ec}
.vht-art__row i {background:#7aa6ad}
.vht-art__done {background:rgba(15,111,105,.38);color:#b1fff0}
.vht-section {position:relative}
.vht-section--tint {background:linear-gradient(100deg,rgba(9,48,69,.28),rgba(4,28,46,.05),rgba(6,73,89,.24));border-block:1px solid rgba(84,200,225,.08)}
.vht-section__intro h2,.vht-promise h2,.vht-listing__head h1,.vht-page h1 {color:#f0faff}
.vht-section__intro p,.vht-promise p,.vht-listing__head p {color:#b4cdda}
.vht-topic,.vht-card,.vht-related__links a {background:linear-gradient(140deg,rgba(17,53,72,.93),rgba(9,35,54,.98));border-color:rgba(122,203,222,.21);box-shadow:0 14px 38px rgba(0,7,16,.18)}
.vht-topic:hover,.vht-card:hover,.vht-related__links a:hover {border-color:rgba(82,225,228,.58);box-shadow:0 14px 45px rgba(0,160,171,.12)}
.vht-topic__icon {background:rgba(21,150,157,.20);color:#6ff5ef}
.vht-topic small,.vht-card p,.vht-card__eyebrow span {color:#b3cbd5}
.vht-topic__arrow,.vht-card__read,.vht-card__eyebrow a {color:#6eefe9}
.vht-card h3 {color:#f3fbff}
.vht-card__thumb,.vht-placeholder {background:linear-gradient(135deg,#123d52,#071f31);color:#8bcfd5}
.vht-card__body {background:transparent}
.vht-empty {background:rgba(16,61,77,.60);color:#b9d1dc;border:1px solid var(--line)}
.vht-promise__list span {border-color:var(--line)}
.vht-footer {background:linear-gradient(110deg,#04121f,#082b3a);border-top:1px solid var(--line)}
/* Article: title and text aligned on the left, TOC at top-right. */
.vht-main {padding-block:24px 100px}
.vht-breadcrumbs {color:#aac7d6;margin:14px 0 28px}
.vht-breadcrumbs [aria-current] {color:#c4dce6}
.vht-article__layout {grid-template-columns:minmax(0,770px) minmax(228px,1fr);gap:50px;align-items:start}
.vht-article__head {max-width:none;margin:3px 0 32px;text-align:left}
.vht-article__head h1 {font-size:clamp(35px,3.5vw,53px);line-height:1.13;letter-spacing:-.049em;margin:14px 0 18px;color:#f3faff}
.vht-title-accent {display:block;color:#49e4df}
.vht-article__summary {margin:0;max-width:720px;color:#bfd4df;font-size:17px;line-height:1.74}
.vht-article__byline {margin-top:24px;justify-content:flex-start;gap:12px;color:#9fbbc9;font-size:12px}
.vht-article__byline span+span:before {color:#528795}
.vht-article__featured {display:none}
.vht-article__aside {min-width:0}
.vht-aside__sticky {position:sticky;top:100px;border:0;padding:0;background:none}
.vht-aside__toc {border:1px solid rgba(123,215,223,.23);border-radius:20px;background:linear-gradient(135deg,rgba(12,49,67,.97),rgba(6,29,47,.98));padding:24px;box-shadow:0 20px 55px rgba(1,10,22,.22)}
.vht-aside__toc>strong {font-size:11px;letter-spacing:.12em;color:#e3f9fb}
.vht-aside__sticky nav {margin-top:16px;gap:0;border-left:1px solid rgba(142,212,224,.24);padding-left:16px}
.vht-aside__sticky nav a {display:block;font-size:12px;color:#c1d5df;line-height:1.4;padding:11px 6px;border-radius:8px}
.vht-aside__sticky nav a:hover,.vht-aside__sticky nav a:focus-visible {background:rgba(43,200,208,.11);color:#7cf2ed}
.vht-aside__sticky nav p {color:#a9cbd3}
.vht-aside__tip {margin-top:19px;padding:22px;background:linear-gradient(135deg,rgba(15,94,99,.30),rgba(8,55,73,.50));border:1px solid rgba(120,232,227,.17);border-radius:17px;color:#edfaff}
.vht-aside__tip p {color:#c1d6df;margin-top:10px;line-height:1.6}
.vht-quick-facts,.vht-prose .ht-note {background:linear-gradient(120deg,rgba(16,86,99,.42),rgba(8,53,75,.50));border:1px solid rgba(86,223,227,.25);border-left:3px solid #39dcd8;color:#d6eff2;box-shadow:0 12px 30px rgba(0,16,23,.11)}
.vht-quick-facts strong {color:#fff}
.vht-quick-facts b {color:#efffff}
.vht-prose {color:#c9dbe7;line-height:1.84;font-size:16px}
.vht-prose h2,.vht-prose h3,.vht-related h2 {color:#f0fbff}
.vht-prose h2 {scroll-margin-top:105px}
.vht-prose h3 {scroll-margin-top:105px}
.vht-prose a {color:#63e9e5;text-decoration-color:#2baeb5}
.vht-prose a:hover {color:#b1fffc}
.vht-prose strong,.vht-prose b {color:#f1fbff}
.vht-prose blockquote {background:rgba(13,72,82,.36);border-color:#39dddd;color:#d8e9ec}
.vht-prose table th {background:rgba(19,86,101,.60)}
.vht-prose th,.vht-prose td {border-color:var(--line)}
/* Light-background diagrams intentionally remain crisp on dark cards. */
.vht-prose .ht-visual,.vht-prose .ht-figure {background:#e8f4f7;border:1px solid #4a8493;box-shadow:0 12px 40px rgba(0,9,22,.22);padding:16px;border-radius:18px}
.vht-prose .ht-visual img,.vht-prose .ht-figure img {background:#e8f4f7;border-radius:10px}
.vht-prose .ht-visual figcaption,.vht-prose .ht-figure figcaption {color:#2b4a5b}
.vht-prose figure:not(.ht-visual):not(.ht-figure) img {background:#eaf5f7}
.vht-article__end {background:rgba(8,79,86,.38);border:1px solid var(--line);color:#cfe3e9}
.vht-article__end span {color:#65e7e5}
.vht-related {border-color:var(--line)}
.vht-related__links a {color:#d9f5f8}
.vht-page-links,.vht-prose pre,.vht-prose code {color:#e5fbff}
.vht-pages .page-numbers {border-color:var(--line);color:#d4edf3}
.vht-pages .current {background:#168c94;color:#fff}
/* Reduced eye strain: keep bright teal only for highlights, not large reading blocks */
@media(max-width:1050px) {.vht-article__layout {grid-template-columns:minmax(0,1fr) 235px;gap:24px}}
@media(max-width:800px) {
 .vht-article__layout {display:block}
 .vht-article__aside {display:none}
 .vht-header {position:relative}
 .vht-nav-toggle {background:rgba(11,50,68,.95);border-color:var(--line);color:#d4f8ff}
 .vht-hero__grid {min-height:auto}
 .vht-article__head {margin-bottom:29px}
 .vht-article__head h1 {font-size:clamp(31px,6vw,47px)}
}
@media(max-width:560px) {
 body {background-attachment:scroll}
 .vht-header__inner {gap:8px}
 .vht-brand {min-width:0}
 .vht-brand__words small {display:none}
 .vht-main {padding-bottom:58px}
 .vht-breadcrumbs {font-size:11px;margin-bottom:22px}
 .vht-article__head h1 {line-height:1.16}
 .vht-article__summary {font-size:15px}
 .vht-article__byline {gap:9px}
 .vht-quick-facts {padding:16px}
 .vht-prose .ht-visual,.vht-prose .ht-figure {padding:9px}
 .vht-prose {font-size:15px}
}
@media(prefers-reduced-motion:reduce) {html {scroll-behavior:auto} .vht-topic,.vht-card__thumb img {transition:none}}
/* Pilot illustrations are actual IMG elements (not all are wrapped in FIGURE). */
.vht-prose img.ht-visual {
 display:block;width:100%;height:auto;max-width:100%;margin:24px 0 28px;
 padding:12px;border:1px solid rgba(99,190,204,.52);border-radius:17px;
 background:#e8f4f7;box-shadow:0 16px 42px rgba(0,4,14,.25);
}
.vht-prose img.ht-visual+figcaption {color:#a9cbd6}