/* Paraply values read from the installed KDE and Ghostty themes. */
@font-face {
  font-family:Plex;
  src:url('fonts/plex.woff2') format('woff2');
  font-weight:100 700;
  font-display:swap;
}
@font-face {
  font-family:JetBrains Mono;
  src:url('fonts/mono.woff2') format('woff2');
  font-weight:100 800;
  font-display:swap;
}
:root {
  color-scheme:dark;
  --paper:#2f2c2a;
  --white:#393633;
  --surface:#282523;
  --ink:#dfdac9;
  --muted:#b8b2a5;
  --line:#4e4945;
  --line-strong:#888296;
  --accent:#b0a4cc;
  --accent-strong:#c3b6e1;
  --on-accent:#2f2c2a;
  --positive:#b3c08f;
  --blue:#8baac4;
  --cyan:#8dbcb9;
  --amber:#d6c08a;
  --selection:#5b5470;
  --selection-ink:#f0ebda;
  --display:Plex,Arial,sans-serif;
  --sans:Plex,Arial,sans-serif;
  --mono:'JetBrains Mono',Consolas,monospace;
}
:root[data-theme="light"] {
  color-scheme:light;
  --paper:#f8f6f4;
  --white:#fdfbfa;
  --surface:#ece9e5;
  --ink:#2a2523;
  --muted:#6e6762;
  --line:#d6d2cd;
  --line-strong:#8a827c;
  --accent:#705f95;
  --accent-strong:#5f507d;
  --on-accent:#f8f6f4;
  --positive:#515d22;
  --blue:#476886;
  --cyan:#346d6d;
  --amber:#84691d;
  --selection:#c2b7dd;
  --selection-ink:#2a2523;
}
* {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:24px;
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:16px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;
}
::selection {
  background:var(--selection);
  color:var(--on-accent);
}
a {
  color:inherit;
  text-underline-offset:4px;
  text-decoration-thickness:1px;
}
a:hover {
  color:var(--accent);
}
button {
  font:inherit;
  color:inherit;
  cursor:pointer;
}
a,button {
  -webkit-tap-highlight-color:transparent;
}
button:disabled {
  cursor:default;
}
button,a,input,summary {
  touch-action:manipulation;
}
:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:5px;
}
h1,h2,h3,p,figure {
  margin:0;
}
h1,h2,h3 {
  font-weight:400;
}
h1,h2 {
  font-family:var(--display);
  letter-spacing:-.055em;
  line-height:1.08;
  text-wrap:balance;
}
h1 {
  font-size:clamp(48px,4.9vw,76px);
}
h2 {
  font-size:clamp(36px,3.4vw,52px);
}
h3 {
  font-family:var(--display);
  font-size:27px;
  line-height:1.22;
  letter-spacing:-.035em;
}
em {
  font-weight:400;
  font-style:normal;
  color:var(--accent);
}
p {
  max-width:70ch;
}
p+p {
  margin-top:18px;
}
small {
  font-size:13px;
}
code {
  font-family:var(--mono);
  font-size:.88em;
  overflow-wrap:anywhere;
}
pre {
  overflow-x:auto;
  padding:20px;
  background:var(--surface);
  font:14px/1.7 var(--mono);
}
img,svg {
  max-width:100%;
  height:auto;
}
button {
  border-radius:0;
}
button svg {
  pointer-events:none;
}
[hidden] {
  display:none!important;
}
.enhanced {
  display:none!important;
}
.js .enhanced {
  display:flex!important;
}
.skip-link {
  position:fixed;
  z-index:10;
  top:-80px;
  left:20px;
  padding:12px 20px;
  background:var(--white);
}
.skip-link:focus {
  top:12px;
}
.page-shell {
  width:min(1360px,calc(100% - 112px));
  margin:auto;
}
.edition {
  display:flex;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  padding:14px 0 12px;
  font:10px/1.4 var(--mono);
  letter-spacing:.1em;
}
.edition>span:last-child {
  display:block;
}
.edition>span:last-child>span {
  font-size:15px;
  line-height:1;
}
.masthead {
  display:flex;
  align-items:center;
  gap:32px;
  border-bottom:2px solid var(--ink);
  min-height:108px;
}
.wordmark {
  font:500 48px/1 var(--display);
  letter-spacing:-2px;
  text-decoration:none;
  white-space:nowrap;
}
.brand-point {
  color:var(--accent);
}
.masthead-note {
  font:12px/1.6 var(--sans);
  border-left:1px solid var(--line);
  padding:2px 0 2px 24px;
  color:var(--muted);
}
.masthead nav {
  display:flex;
  align-items:center;
  gap:30px;
  margin-left:auto;
  font-size:14px;
}
.masthead nav a {
  position:relative;
  text-decoration:none;
  padding:13px 0;
}
.masthead nav a[aria-current] {
  font-weight:600;
}
.masthead nav a[aria-current]:after {
  content:'';
  position:absolute;
  bottom:6px;
  left:0;
  right:0;
  height:2px;
  background:var(--accent);
}
.live-dot {
  display:inline-block;
  width:7px;
  height:7px;
  flex-shrink:0;
  border-radius:50%;
  background:var(--positive);
  margin-left:5px;
}
.eyebrow,.tiny-label,.mono-label {
  font:10px/1.6 var(--mono);
  letter-spacing:.09em;
  text-transform:uppercase;
}
.eyebrow {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:23px;
}
.section-no {
  font:12px/1 var(--mono);
  border:1px solid currentColor;
  width:25px;
  height:25px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.status {
  font:9px/1.2 var(--mono);
  letter-spacing:.03em;
  border:1px solid var(--line);
  padding:5px 7px;
  color:var(--muted);
  margin-left:auto;
  white-space:nowrap;
}
.hero {
  display:grid;
  grid-template-columns:44% 56%;
  align-items:center;
  gap:0;
  padding:62px 0 52px;
}
.hero-copy {
  position:relative;
  z-index:1;
}
.hero-copy>.eyebrow {
  max-width:490px;
}
.hero h1 {
  margin-bottom:26px;
}
.hero .lede {
  font-family:var(--display);
  font-size:23px;
  line-height:1.4;
  letter-spacing:-.02em;
  max-width:470px;
}
.hero-detail {
  font-size:15px;
  line-height:1.75;
  max-width:430px;
  margin-top:18px!important;
  color:var(--muted);
}
.actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:25px;
  margin-top:29px;
}
.button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:28px;
  min-height:48px;
  padding:13px 20px;
  background:var(--accent);
  border:1px solid var(--accent);
  color:var(--white);
  font:600 13px/1.5 var(--sans);
  text-decoration:none;

  transition:transform .16s ease,box-shadow .16s ease;
}
.button:hover {
  color:var(--white);
  background:var(--accent-strong);


}
.button:active {


}
.button span {
  font-size:18px;
}
.text-link {
  font-size:13px;
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:5px;
}
.compatibility {
  display:flex;
  align-items:center;
  gap:10px;
  font:11px/1.5 var(--mono);
  color:var(--muted);
  margin-top:27px!important;
}
.compatibility>span:last-child {
  border-left:1px solid var(--line);
  padding-left:10px;
}
.technical-frame {
  position:relative;
  min-width:0;
  margin-left:12px;
}
.plate-stage-wrap {
  position:relative;
  color:var(--ink);
  min-height:360px;
  display:flex;
  align-items:center;
  transition:background .25s ease,color .25s ease;
}
.plate-stage-wrap>svg {
  display:block;
  width:100%;
  overflow:visible;
}
.technical-frame figcaption {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-top:1px solid var(--line);
  padding:13px 0;
  font:9px/1.5 var(--mono);
  letter-spacing:.06em;
}
.figure-controls {
  gap:16px;
}
.figure-controls button {
  border:0;
  background:none;
  padding:8px 0;
  font:10px/1.4 var(--mono);
  letter-spacing:0;
  text-decoration:underline;
  text-underline-offset:3px;
}
.figure-controls button:hover {
  color:var(--accent);
}

.results-strip {
  border-top:2px solid var(--ink);
  border-bottom:1px solid var(--ink);
  padding:18px 0 16px;
  scroll-margin-top:30px;
}
.strip-heading {
  display:flex;
  align-items:center;
  gap:20px;
  justify-content:space-between;
}
.strip-heading h2 {
  font:600 15px/1.5 var(--sans);
  letter-spacing:0;
}
.strip-heading>span {
  font:9px/1.4 var(--mono);
  letter-spacing:.08em;
  color:var(--muted);
}
.strip-heading>a {
  font-size:12px;
  font-weight:600;
}
.metric-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  padding:25px 0 23px;
}
.metric {
  padding:0 26px;
  border-left:1px solid var(--line);
}
.metric:first-child {
  padding-left:0;
  border-left:0;
}
.metric-number {
  display:block;
  font:52px/1.1 var(--display);
  letter-spacing:-.06em;
  color:var(--accent);
  white-space:nowrap;
}
.metric-number>span {
  font-size:27px;
}
.metric h3 {
  font:500 14px/1.5 var(--sans);
  letter-spacing:0;
  margin-top:10px;
}
.metric p {
  font-size:11px;
  color:var(--muted);
  margin-top:4px;
}
.study-note {
  font:11px/1.7 var(--sans);
  color:var(--muted);
  max-width:none;
}
.study-note a {
  white-space:normal;
}
.section-space {
  padding:79px 0;
}
.section-heading {
  max-width:630px;
}
.section-heading>p:last-child {
  margin-top:23px;
  color:var(--muted);
  font-size:16px;
  max-width:520px;
}
.section-heading.horizontal {
  display:flex;
  max-width:none;
  align-items:flex-end;
  justify-content:space-between;
  gap:64px;
}
.section-heading.horizontal>p {
  max-width:380px;
  margin-bottom:4px;
}
.demo-layout {
  display:grid;
  grid-template-columns:.83fr 1.17fr;
  gap:72px;
  margin-top:37px;
  align-items:start;
}
.demo-steps {
  border-top:1px solid var(--ink);
}
.step-button {
  display:flex;
  align-items:flex-start;
  gap:16px;
  background:none;
  border:0;
  border-bottom:1px solid var(--line);
  padding:26px 12px;
  text-align:left;
  width:100%;
  transition:background .16s ease;
}
.step-button>span:first-child {
  font:11px/2 var(--mono);
}
.step-button>span:last-child {
  margin-left:auto;
}
.step-button strong {
  font:500 17px/1.4 var(--sans);
  display:block;
}
.step-button small {
  display:block;
  color:var(--muted);
  line-height:1.6;
  max-width:270px;
  margin-top:8px;
}
.step-button[aria-pressed=true] {
  background:var(--surface);
  border-left:3px solid var(--accent);
  padding-left:9px;
}
.step-button:hover {
  background:var(--surface);
}
.demo-window {
  border:1px solid var(--line);
  background:var(--white);

  min-width:0;
}
.window-bar {
  display:flex;
  justify-content:space-between;
  gap:10px;
  font:9px/1.6 var(--mono);
  padding:13px 15px;
  border-bottom:1px solid var(--line);
  color:var(--muted);
  background:var(--surface);
}
.window-bar>span:first-child {
  display:flex;
  gap:4px;
  align-items:center;
}
.window-bar i {
  width:5px;
  height:5px;
  border-radius:50%;
  border:1px solid var(--line);
}
.demo-panel {
  padding:28px;
  min-height:290px;
}
.demo-panel+.demo-panel {
  border-top:1px solid var(--line);
}
.js .demo-panel+.demo-panel {
  border-top:none;
}
.mono-label {
  color:var(--muted);
}
.prompt {
  display:flex;
  gap:14px;
  margin:25px 0;
  font:19px/1.5 var(--display);
}
.prompt-symbol {
  color:var(--accent);
}
.receipt-line {
  display:flex;
  align-items:center;
  gap:13px;
  margin-bottom:19px;
}
.square-check {
  width:25px;
  height:25px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--surface);
  color:var(--positive);
}
.receipt-line strong {
  font:500 12px/1.5 var(--sans);
}
.receipt-line small {
  display:block;
  font:10px/1.7 var(--mono);
  color:var(--muted);
}
.code-source {
  padding:15px;
  background:var(--surface);
  font:11px/2 var(--mono);
  overflow-wrap:anywhere;
}
.code-source>span {
  color:var(--muted);
  margin-right:12px;
}
.demo-caption {
  padding:12px 18px;
  font:9px/1.5 var(--mono);
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  gap:8px;
}
.recall-result {
  border-left:2px solid var(--accent);
  padding:0 0 0 16px;
}
.recall-result p {
  font:18px/1.6 var(--display);
  margin:12px 0;
}
.inline-link {
  border:0;
  padding:4px 0;
  background:none;
  color:var(--accent);
  font:11px/1.5 var(--mono);
  text-decoration:underline;
  text-underline-offset:4px;
}
.source-large {
  margin-top:25px;
  line-height:2.5;
}
mark {
  background:var(--selection);
  color:var(--ink);
}
.source-explanation {
  font-size:12px;
  color:var(--muted);
  margin-top:22px!important;
}
.editorial {
  border-top:1px solid var(--line);
}
.editorial-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin-top:39px;
}
.story {
  display:flex;
  flex-direction:column;
  text-decoration:none;
  padding:0 26px;
  border-left:1px solid var(--line);
  color:var(--ink);
}
.story:first-child {
  padding-left:0;
  border-left:0;
}
.story:last-child {
  padding-right:0;
}
.story:hover {
  color:var(--ink);
}
.story:hover h3 {
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:4px;
}
.story .eyebrow {
  margin:23px 0 14px;
  font-size:9px;
}
.story>p:not(.eyebrow) {
  font-size:14px;
  color:var(--muted);
  line-height:1.75;
  margin:17px 0 22px;
}
.story .text-link {
  margin-top:auto;
}
.story-graphic {
  height:205px;
  overflow:hidden;
  background:var(--surface);
  position:relative;
  padding:24px;
}
.chart-art {
  background:var(--surface);
}
.chart-art>span {
  font:8px/1.4 var(--mono);
  display:block;
}
.chart-art>i {
  display:block;
  width:var(--bar);
  height:19px;
  background:var(--bar-color,var(--positive));
  margin:5px 0 11px;
}
.chart-art>b {
  position:absolute;
  bottom:14px;
  right:20px;
  font:21px/1.05 var(--display);
  text-align:right;
  letter-spacing:-.035em;
}
.quote-art {
  background:var(--surface);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.quote-art>span {
  font:8px/1.4 var(--mono);
  letter-spacing:.05em;
}
.quote-art>b {
  font:27px/1.3 var(--display);
  letter-spacing:-.03em;
}
.quote-proof {
  border-top:1px solid var(--line);
  padding-top:12px;
}
.quote-proof i {
  float:right;
  font-style:normal;
}
.clients-art {
  background:var(--surface);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:11px;
}
.clients-art>span {
  font:9px/1.4 var(--mono);
  border:1px solid var(--line);
  padding:6px 13px;
  background:var(--surface);
}
.clients-art>div {
  font:21px/1.2 var(--display);
  color:var(--muted);
}
.clients-art b {
  font-weight:400;
  color:var(--ink);
}
.clients-art>small {
  font:7px/1.5 var(--mono);
  margin-top:8px;
}
.hms-feature {
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:80px;
  padding:60px 70px;
  background:var(--surface);
  color:var(--paper);
}
.hms-feature .eyebrow {
  color:var(--muted);
  font-size:9px;
}
.hms-feature h2 em {
  color:var(--accent);
}
.hms-feature p:not(.eyebrow) {
  font-size:15px;
  color:var(--muted);
  margin-top:24px;
  max-width:450px;
}
.button-light {
  background:var(--paper);
  border-color:var(--paper);
  color:var(--ink);

  margin-top:27px;
}
.button-light:hover {
  background:var(--white);
  color:var(--ink);

}
.release-note {
  display:block;
  font:10px/1.4 var(--mono);
  color:var(--muted);
  margin-top:17px;
}
.hms-feature-art {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}
.hms-feature-art>.mono-label {
  color:var(--muted);
  margin-top:24px;
  font-size:8px;
}
.closing {
  text-align:center;
  padding:83px 20px 90px;
}
.closing>.eyebrow {
  justify-content:center;
}
.closing p:not(.eyebrow) {
  max-width:520px;
  margin:24px auto;
  color:var(--muted);
  font-size:15px;
}
.closing .actions {
  justify-content:center;
}
.footer {
  padding:43px 0 0;
  border-top:2px solid var(--ink);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
}
.footer .wordmark {
  font-size:48px;
}
.footer p {
  font-size:12px;
  color:var(--muted);
  margin-top:14px;
}
.footer-links {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px 30px;
  align-content:center;
  font-size:12px;
}
.footer-links>a {
  text-decoration:none;
}
.footer-links>a:hover {
  text-decoration:underline;
}
.footer-end {
  grid-column:1/-1;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  font:9px/1.4 var(--mono);
  letter-spacing:.06em;
  padding:20px 0 28px;
}
.hms-hero {
  background:var(--surface);
  color:var(--paper);
  padding:52px 34px;
  margin-top:24px;
  grid-template-columns:46% 54%;
}
.hms-hero h1 {
  font-size:clamp(42px,4.3vw,64px);
}
.hms-hero h1 em {
  color:var(--accent);
}
.hms-hero .hero-detail,.hms-hero .compatibility {
  color:var(--muted);
}
.hms-hero .eyebrow {
  font-size:9px;
}
.hms-hero .status {
  color:var(--ink);
  border-color:var(--line);
}
.hms-hero .compatibility {
  font-size:10px;
}
.hms-hero .button {
  background:var(--accent);
  color:var(--on-accent);
  border-color:var(--accent);

}
.hms-hero .text-link:hover {
  color:var(--accent-strong);
}
.hms-hero .technical-frame figcaption {
  border-color:var(--line);
  color:var(--muted);
}
.hms-hero .plate-stage-wrap {
  background:transparent;
}
.hms-hero .figure-controls button:hover {
  color:var(--accent-strong);
}
.hms-hero .button:hover {
  background:var(--accent-strong);
}
.principle-strip {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  padding:21px 0;
  border-bottom:1px solid var(--ink);
  font-size:12px;
}
.principle-strip>span+span {
  border-left:1px solid var(--line);
  padding-left:30px;
}
.principle-strip b {
  font:10px/1 var(--mono);
  margin-right:12px;
  color:var(--accent);
}
.hms-demo {
  display:grid;
  grid-template-columns:1fr 1.6fr;
  margin-top:37px;
  border:1px solid var(--line);
  background:var(--surface);
}
.task-slip {
  background:var(--surface);
  padding:35px 30px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.task-slip .eyebrow {
  font-size:9px;
}
.task-slip blockquote {
  font:27px/1.35 var(--display);
  letter-spacing:-.03em;
  margin:0 0 22px;
}
.task-slip p:not(.eyebrow) {
  font-size:12px;
  color:var(--muted);
}
.task-slip .button {
  margin-top:auto;
  font-size:11px;
}
.task-desktop {
  background:var(--surface);
  min-width:0;
}
.desktop-bar {
  display:flex;
  gap:8px;
  align-items:center;
  background:var(--surface);
  color:var(--ink);
  font:9px/1.4 var(--mono);
  padding:12px 16px;
}
.desktop-bar>span:last-child {
  margin-left:auto;
}
.app-windows {
  min-height:325px;
  position:relative;
  margin:25px 20px;
}
.browser-mock,.document-mock {
  width:60%;
  background:var(--white);

  border:1px solid var(--line);
  position:absolute;
  padding:0 20px 20px;
}
.browser-mock {
  top:0;
  left:0;
}
.document-mock {
  bottom:0;
  right:0;
  width:54%;
  background:var(--white);
}
.mock-chrome {
  margin:0 -20px 20px;
  padding:8px 10px;
  font:8px/1.4 var(--mono);
  border-bottom:1px solid var(--line);
  background:var(--surface);
  display:flex;
  gap:13px;
}
.browser-mock h3 {
  font-size:26px;
  margin:10px 0 14px;
}
.browser-mock>p:not(.tiny-label) {
  font-size:11px;
}
.mock-line {
  display:block;
  width:90%;
  height:3px;
  background:var(--line);
  margin-top:11px;
}
.mock-line.short {
  width:60%;
}
.document-mock .tiny-label {
  font-size:8px;
}
.task-output {
  margin-top:16px;
  font:11px/1.8 var(--mono);
}
.document-verified {
  font:8px/1.5 var(--mono);
  display:block;
  border-top:1px solid var(--line);
  margin-top:20px;
  padding-top:10px;
  color:var(--positive);
}
.task-progress {
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:14px 16px;
  border-top:1px solid var(--line);
  font:9px/1.5 var(--mono);
}
.hms-demo+.study-note {
  margin-top:13px;
}
.task-running .document-mock {
  opacity:.35;
}
.task-running .document-verified {
  visibility:hidden;
}
.task-reading .browser-mock {
  outline:3px solid var(--accent);
  outline-offset:3px;
}
.task-writing .document-mock {
  opacity:1;
  outline:3px solid var(--accent);
  outline-offset:3px;
}
.hms-method {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px;
  border-top:1px solid var(--line);
}
.method-list article {
  display:flex;
  gap:22px;
  padding:20px 0;
  border-top:1px solid var(--line);
}
.method-list article>span {
  font:11px/2 var(--mono);
  color:var(--accent);
}
.method-list h3 {
  font:500 18px/1.4 var(--sans);
}
.method-list p {
  font-size:14px;
  color:var(--muted);
  margin-top:9px;
}
.install-section {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  background:var(--surface);
  border-top:2px solid var(--ink);
  padding:50px 35px;
}
.install-section h2 {
  font-size:43px;
}
.install-section p:not(.eyebrow) {
  font-size:14px;
  color:var(--muted);
  margin:22px 0;
}
.install-card {
  border:1px solid var(--line);
  padding:25px;
  background:var(--white);

  min-width:0;
}
.install-card .strip-heading>span {
  font-size:9px;
}
.available-text {
  color:var(--positive)!important;
}
.command {
  background:var(--surface);
  color:var(--ink);
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:20px;
  font-size:13px;
  line-height:1.8;
}
.command code {
  min-width:0;
  word-break:break-word;
  white-space:pre-wrap;
}
.command button {
  flex-shrink:0;
  background:none;
  color:inherit;
  border:1px solid var(--line);
  padding:6px 9px;
  font:10px/1.4 var(--mono);
  min-height:34px;
}
.command button:hover {
  background:var(--surface);
}
.command button.copy-error {
  max-width:100px;
}
.install-card p.small {
  font-size:11px;
  margin:17px 0;
}
.install-links {
  display:flex;
  gap:18px;
  font-size:11px;
  padding-top:14px;
  border-top:1px solid var(--line);
}
.boundary-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  margin-top:35px;
}
.boundary-grid h3 {
  font-size:25px;
  margin-bottom:15px;
}
.boundary-grid p {
  color:var(--muted);
  font-size:14px;
}
.boundary-grid .text-link {
  display:inline-block;
  margin-top:19px;
}
.boundary-grid>article+article {
  border-left:1px solid var(--line);
  padding-left:40px;
}
.page-intro,.guide-intro {
  padding:65px 0 55px;
  max-width:850px;
}
.page-intro .lede,.guide-intro .lede {
  font:24px/1.5 var(--display);
  letter-spacing:-.02em;
  max-width:650px;
  margin-top:28px;
}
.page-intro>p:last-child:not(.lede) {
  font-size:15px;
  color:var(--muted);
  max-width:670px;
  margin-top:20px;
}
.results-explorer {
  border:1px solid var(--line);
  padding:26px 30px;
  background:var(--surface);
}
.workload-buttons {
  gap:0;
  margin-top:25px;
  border-bottom:1px solid var(--line);
  flex-wrap:wrap;
}
.workload-buttons button {
  padding:15px 23px;
  border:0;
  background:none;
  font-size:13px;
  text-align:left;
}
.workload-buttons button>span {
  font:9px/1.4 var(--mono);
  display:block;
  color:var(--muted);
  margin-top:3px;
}
.workload-buttons button[aria-pressed=true] {
  background:var(--ink);
  color:var(--paper);
}
.workload-buttons button[aria-pressed=true]>span {
  color:var(--muted);
}
.workload-buttons button:hover:not([aria-pressed=true]) {
  background:var(--surface);
}
.explorer-summary {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  padding:37px 0;
}
.explorer-summary .eyebrow {
  margin-bottom:15px;
}
.big-result {
  font:90px/1 var(--display);
  letter-spacing:-.06em;
  color:var(--accent);
}
.big-result>span {
  font-size:43px;
}
.explorer-summary h3 {
  font:500 17px/1.5 var(--sans);
  margin:10px 0;
}
.explorer-summary p:not(.eyebrow,.big-result) {
  font-size:12px;
  color:var(--muted);
}
.result-bars {
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:18px;
}
.result-bars>div>span {
  font-size:11px;
}
.bar {
  height:36px;
  background:var(--positive);
  color:var(--on-accent);
  font:11px/36px var(--mono);
  text-align:right;
  padding-right:12px;
  width:var(--width,100%);
  margin-top:6px;
  transition:width .25s ease;
}
.bar.with-lavett {
  background:var(--accent);
}
.result-bars>p {
  font-size:10px!important;
  max-width:380px;
}
.result-details {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:20px 0;
}
.result-details>div+div {
  border-left:1px solid var(--line);
  padding-left:24px;
}
.result-details .tiny-label {
  font-size:8px;
  display:block;
}
.result-details strong {
  display:block;
  font:26px/1.4 var(--display);
  margin-top:6px;
}
.result-caveat {
  font-size:12px;
  margin-top:20px;
  color:var(--muted);
  min-height:3.5em;
}
.table-scroll {
  overflow:auto;
  margin:35px 0 16px;
}
table {
  border-collapse:collapse;
  width:100%;
  min-width:800px;
  font-size:13px;
  text-align:left;
}
caption {
  text-align:left;
  font:10px/1.5 var(--mono);
  padding:0 0 16px;
  color:var(--muted);
}
th,td {
  padding:18px 12px;
  border-bottom:1px solid var(--line);
  vertical-align:top;
}
th:first-child,td:first-child {
  padding-left:0;
}
thead th {
  font:10px/1.6 var(--mono);
  border-top:2px solid var(--ink);
  border-bottom:1px solid var(--ink);
}
tbody th {
  font-weight:500;
}
td b {
  font-weight:500;
  color:var(--accent);
}
.disclosure {
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:20px 0;
  margin-top:32px;
}
.disclosure summary {
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  font-size:14px;
  list-style:none;
  gap:20px;
}
.disclosure summary::-webkit-details-marker {
  display:none;
}
.disclosure p {
  font-size:13px;
  color:var(--muted);
  max-width:none;
  margin-top:18px;
}
.disclosure[open] summary span {
  transform:rotate(45deg);
}
.quality-section {
  border-top:1px solid var(--line);
}
.margin-symbol {
  font-size:40px;
  color:var(--accent);
  display:block;
  margin-bottom:10px;
}
.notebook-note {
  padding:36px 40px;
  background:var(--surface);
  border-left:3px solid var(--accent);
}
.notebook-note h2 {
  font-size:34px;
  margin-bottom:22px;
}
.notebook-note p:not(.eyebrow) {
  font-size:14px;
  color:var(--muted);
  max-width:95ch;
}
.notebook-note p.small {
  font-size:11px;
}
.guide-layout {
  display:grid;
  grid-template-columns:230px 1fr;
  gap:80px;
  border-top:1px solid var(--ink);
  padding:40px 0 80px;
}
.contents {
  position:sticky;
  top:30px;
  align-self:start;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.contents .eyebrow {
  margin-bottom:10px;
}
.contents>a {
  font-size:12px;
  text-decoration:none;
  padding:4px 0;
}
.contents>a:hover {
  text-decoration:underline;
}
.guide-body {
  max-width:740px;
}
.guide-body section {
  padding:0 0 45px;
  margin-bottom:40px;
  border-bottom:1px solid var(--line);
  scroll-margin-top:25px;
}
.guide-body section:last-child {
  border:0;
  margin:0;
  padding-bottom:0;
}
.guide-body h2 {
  font-size:39px;
  margin-bottom:25px;
}
.guide-body p,.guide-body li {
  font-size:15px;
  color:var(--muted);
}
.guide-body a {
  color:var(--ink);
}
.guide-body a:hover {
  color:var(--accent);
}
.guide-body .eyebrow {
  font-size:10px;
  color:var(--accent);
}
.guide-body ol {
  padding-left:20px;
}
.guide-body li {
  padding:4px 0 8px 8px;
}
.guide-body strong {
  color:var(--ink);
}
.note {
  margin-top:25px;
  padding:22px;
  background:var(--surface);
  border-left:2px solid var(--line);
}
.note>strong {
  font-size:14px;
}
.note p {
  font-size:13px;
  margin-top:8px;
}
.light-command {
  margin:23px 0;
}
.command-list>div {
  border-top:1px solid var(--line);
  padding:21px 0;
}
.command-list code {
  font-size:12px;
  color:var(--positive);
}
.command-list p {
  font-size:13px;
  margin-top:8px;
}
@media(min-width:1600px) {
  .hero:not(.hms-hero) h1 {
    font-size:68px;
  }
  .hero:not(.hms-hero) {
    padding:46px 0 42px;
  }
  .plate-stage-wrap {
    min-height:450px;
  }
}
@media(max-width:1150px) {
  .page-shell {
    width:calc(100% - 64px);
  }
  .masthead {
    gap:24px;
  }
  .masthead nav {
    gap:20px;
  }
  .hero {
    grid-template-columns:47% 53%;
    padding:48px 0;
  }
  .hero h1 {
    font-size:59px;
  }
  .hero .eyebrow {
    font-size:9px;
    gap:8px;
  }
  .status {
    font-size:8px;
    padding:4px;
  }
  .hero .lede {
    font-size:21px;
  }
  .hero-detail {
    font-size:14px;
  }
  .hero .actions {
    gap:19px;
  }
  .hero .text-link {
    font-size:12px;
  }
  .compatibility {
    font-size:9px;
    gap:6px;
  }
  .caption-detail {
    display:none;
  }
  .plate-stage-wrap {
    min-height:320px;
  }
  .metric-number {
    font-size:44px;
  }
  .metric {
    padding:0 20px;
  }
  .demo-layout {
    gap:40px;
  }
  .hms-feature {
    gap:60px;
    padding:45px;
  }
  .hms-method {
    gap:50px;
  }
  .hms-hero {
    padding:40px 28px;
  }
  .hms-hero h1 {
    font-size:53px;
  }
  .hms-hero .eyebrow {
    flex-wrap:wrap;
  }
  .hms-hero .status {
    margin-left:0;
  }
  .install-section {
    gap:30px;
    padding:40px 28px;
  }
  .guide-layout {
    gap:45px;
    grid-template-columns:190px 1fr;
  }
  .story-graphic {
    padding:20px;
  }
  .quote-art>b {
    font-size:23px;
  }
}
@media(max-width:900px) {
  .page-shell {
    width:calc(100% - 40px);
  }
  .masthead-note {
    display:none;
  }
  .masthead {
    min-height:90px;
  }
  .masthead .wordmark {
    font-size:56px;
  }
  .hero h1 {
    font-size:50px;
  }
  .hero {
    padding:40px 0;
    grid-template-columns:48% 52%;
  }
  .hero-copy>.eyebrow {
    flex-wrap:wrap;
  }
  .hero .status {
    margin-left:0;
  }
  .hero-detail {
    font-size:13px;
  }
  .hero .lede {
    font-size:20px;
  }
  .hero .compatibility {
    flex-wrap:wrap;
  }
  .hero .actions {
    gap:17px;
    margin-top:24px;
  }
  .plate-stage-wrap {
    min-height:280px;
  }
  .figure-controls {
    gap:9px;
  }
  .figure-controls button {
    font-size:9px;
  }
  .technical-frame figcaption {
    align-items:flex-start;
    flex-wrap:wrap;
  }
  .metric-grid {
    gap:0;
  }
  .metric {
    padding:0 15px;
  }
  .metric-number {
    font-size:39px;
  }
  .metric-number>span {
    font-size:21px;
  }
  .metric h3 {
    font-size:12px;
  }
  .metric p {
    font-size:10px;
  }
  .strip-heading>span {
    display:none;
  }
  .demo-layout {
    gap:28px;
    grid-template-columns:.9fr 1.1fr;
  }
  .demo-panel {
    padding:20px;
    min-height:325px;
  }
  .window-bar {
    font-size:8px;
  }
  .step-button {
    padding-top:25px;
    padding-bottom:25px;
  }
  .step-button strong {
    font-size:15px;
  }
  .step-button small {
    font-size:12px;
  }
  .section-heading.horizontal {
    gap:40px;
  }
  .section-heading.horizontal>p {
    max-width:300px;
    font-size:14px;
  }
  .story {
    padding:0 18px;
  }
  .story h3 {
    font-size:23px;
  }
  .story-graphic {
    height:180px;
    padding:18px;
  }
  .quote-art>b {
    font-size:21px;
  }
  .clients-art>div {
    font-size:17px;
  }
  .clients-art>small {
    font-size:6px;
  }
  .hms-feature {
    grid-template-columns:.8fr 1.2fr;
    gap:40px;
    padding:40px 30px;
  }
  .hms-feature p:not(.eyebrow) {
    font-size:13px;
  }
  .hms-feature h2 {
    font-size:39px;
  }
  .hms-hero h1 {
    font-size:45px;
  }
  .hms-hero .technical-frame {
    margin-left:0;
  }
  .hms-hero .button {
    font-size:11px;
    padding:12px 15px;
    gap:10px;
  }
  .principle-strip {
    font-size:10px;
  }
  .principle-strip>span+span {
    padding-left:17px;
  }
  .principle-strip b {
    margin-right:6px;
  }
  .hms-demo {
    grid-template-columns:.8fr 1.2fr;
  }
  .task-slip {
    padding:25px 20px;
  }
  .task-slip blockquote {
    font-size:24px;
  }
  .browser-mock,.document-mock {
    width:70%;
  }
  .task-slip .button {
    font-size:10px;
    padding:10px;
    gap:8px;
  }
  .install-section h2 {
    font-size:36px;
  }
  .install-section .command {
    flex-direction:column;
  }
  .result-details .tiny-label {
    font-size:7px;
  }
  .guide-layout {
    grid-template-columns:160px 1fr;
    gap:30px;
  }
  .contents a {
    font-size:11px;
  }
  .explorer-summary {
    gap:30px;
  }
}
@media(max-width:680px) {
  body {
    font-size:15px;
  }
  .page-shell {
    width:calc(100% - 36px);
  }
  .edition {
    font-size:8px;
    padding:11px 0;
  }
  .edition>span:last-child {
    gap:0;
  }
  .edition>span:last-child>span {
    display:none;
  }
  .masthead {
    flex-wrap:wrap;
    padding:16px 0 0;
    gap:10px;
    min-height:0;
  }
  .masthead .wordmark {
    font-size:53px;
    line-height:.9;
  }
  .masthead:after {
    content:'LOCAL FIRST / BY BRUKET';
    font:8px/1.4 var(--mono);
    margin-left:auto;
    order:0;
    align-self:center;
  }
  .masthead nav {
    margin:0;
    order:1;
    width:100%;
    gap:0;
    justify-content:space-between;
    font-size:12px;
    padding:0 0 3px;
  }
  .masthead nav a {
    padding:13px 0;
    min-height:44px;
  }
  .masthead nav a[aria-current]:after {
    bottom:5px;
  }
  .hero {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    padding:31px 0 25px;
  }
  .hero h1 {
    font-size:clamp(43px,10.5vw,66px);
    margin-bottom:20px;
  }
  .hero .eyebrow {
    font-size:8px;
    flex-wrap:nowrap;
    gap:9px;
    margin-bottom:22px;
  }
  .hero .status {
    margin-left:auto;
    font-size:7px;
    padding:4px;
  }
  .section-no {
    width:22px;
    height:22px;
    font-size:10px;
  }
  .hero .lede {
    font-size:22px;
    max-width:450px;
  }
  .hero-detail {
    font-size:14px;
    max-width:500px;
    margin-top:16px!important;
  }
  .hero .actions {
    gap:22px;
  }
  .button {
    min-height:48px;
  }
  .hero .button {
    font-size:12px;
  }
  .hero .text-link {
    font-size:12px;
  }
  .compatibility {
    font-size:9px!important;
    margin-top:22px!important;
  }
  .technical-frame {
    margin:28px 0 0;
  }
  .plate-stage-wrap {
    min-height:0;
  }
  .plate-stage-wrap>svg {
    margin:-8px 0 -4px;
  }
  .technical-frame figcaption {
    padding:7px 0;
    align-items:center;
    flex-wrap:nowrap;
    font-size:8px;
  }
  .figure-controls {
    gap:17px;
  }
  .figure-controls button {
    font-size:9px;
    min-height:36px;
  }
  .caption-detail {
    display:none;
  }
  .results-strip {
    padding-top:15px;
  }
  .strip-heading {
    gap:15px;
  }
  .strip-heading h2 {
    font-size:13px;
  }
  .strip-heading>a {
    font-size:11px;
  }
  .metric-grid {
    grid-template-columns:1fr 1fr;
    padding:21px 0 7px;
    row-gap:22px;
  }
  .metric {
    padding:0 0 0 20px;
  }
  .metric:nth-child(3) {
    border-left:0;
    padding-left:0;
  }
  .metric-number {
    font-size:45px;
  }
  .metric h3 {
    font-size:12px;
  }
  .metric p {
    font-size:10px;
    max-width:145px;
  }
  .study-note {
    font-size:10px;
    line-height:1.75;
  }
  .results-strip>.study-note {
    border-top:1px solid var(--line);
    padding-top:14px;
    margin-top:12px;
  }
  .section-space {
    padding:48px 0;
  }
  .eyebrow {
    font-size:9px;
    margin-bottom:18px;
  }
  h2 {
    font-size:38px;
  }
  .section-heading>p:last-child {
    font-size:14px;
    margin-top:20px;
  }
  .demo-layout {
    grid-template-columns:1fr;
    gap:25px;
    margin-top:25px;
  }
  .demo-steps {
    display:flex;
    flex-direction:column;
  }
  .step-button {
    padding:18px 10px;
    gap:14px;
  }
  .step-button strong {
    font-size:15px;
  }
  .step-button small {
    font-size:12px;
    max-width:none;
    margin-top:4px;
  }
  .step-button[aria-pressed=true] {
    padding-left:7px;
  }
  .demo-panel {
    padding:24px 18px;
    min-height:280px;
  }
  .window-bar {
    font-size:8px;
    padding:11px;
  }
  .demo-caption {
    font-size:8px;
    padding:11px;
    gap:6px;
  }
  .prompt {
    font-size:19px;
  }
  .code-source {
    font-size:10px;
    padding:13px;
  }
  .source-explanation {
    font-size:12px;
  }
  .section-heading.horizontal {
    display:block;
  }
  .section-heading.horizontal>p {
    max-width:500px;
    margin-top:22px;
  }
  .editorial-grid {
    grid-template-columns:1fr;
    gap:32px;
    margin-top:27px;
  }
  .story,.story:first-child,.story:last-child {
    padding:0 0 26px;
    border-left:0;
    border-bottom:1px solid var(--line);
  }
  .story-graphic {
    height:190px;
    padding:25px;
  }
  .chart-art>b {
    font-size:25px;
    bottom:20px;
  }
  .quote-art>b {
    font-size:30px;
  }
  .clients-art>div {
    font-size:25px;
  }
  .clients-art>small {
    font-size:8px;
  }
  .story .eyebrow {
    margin:19px 0 10px;
  }
  .story h3 {
    font-size:29px;
  }
  .story>p:not(.eyebrow) {
    font-size:14px;
    margin:13px 0 18px;
  }
  .hms-feature {
    grid-template-columns:1fr;
    gap:45px;
    padding:40px 24px;
  }
  .hms-feature-art {
    order:1;
  }
  .hms-feature h2 {
    font-size:40px;
  }
  .hms-feature .eyebrow {
    font-size:8px;
    gap:6px;
  }
  .hms-feature p:not(.eyebrow) {
    font-size:14px;
  }
  .hms-feature .release-note {
    font-size:9px;
  }
  .closing {
    padding:49px 10px 60px;
  }
  .closing h2 {
    font-size:36px;
  }
  .closing p:not(.eyebrow) {
    font-size:14px;
  }
  .closing .actions {
    gap:24px;
  }
  .footer {
    grid-template-columns:1fr;
    gap:25px;
    padding-top:30px;
  }
  .footer .wordmark {
    font-size:44px;
  }
  .footer-links {
    font-size:12px;
    gap:13px 15px;
  }
  .footer-end {
    font-size:8px;
    gap:10px;
    padding:16px 0 24px;
  }
  .hms-hero {
    padding:30px 20px 14px;
    margin-top:18px;
  }
  .hms-hero h1 {
    font-size:43px;
  }
  .hms-hero .eyebrow {
    font-size:7px;
    gap:7px;
  }
  .hms-hero .status {
    font-size:7px;
  }
  .hms-hero .hero-detail {
    font-size:13px;
  }
  .hms-hero .technical-frame {
    margin-top:30px;
  }
  .hms-hero .plate-stage-wrap>svg {
    width:calc(100% + 20px);
    max-width:none;
    margin-left:-10px;
  }
  .hms-hero .text-link {
    font-size:11px;
  }
  .hms-hero .compatibility {
    font-size:8px!important;
    gap:6px;
  }
  .principle-strip {
    display:flex;
    flex-direction:column;
    gap:12px;
    padding:20px 0;
    font-size:12px;
  }
  .principle-strip>span+span {
    border:0;
    padding-left:0;
  }
  .principle-strip b {
    margin-right:12px;
  }
  .hms-demo {
    grid-template-columns:1fr;
    margin-top:25px;
  }
  .task-slip {
    padding:25px;
  }
  .task-slip blockquote {
    font-size:27px;
    max-width:350px;
  }
  .task-slip .button {
    margin-top:23px;
    font-size:11px;
    padding:12px 16px;
    gap:20px;
  }
  .app-windows {
    margin:24px 15px;
    min-height:325px;
  }
  .browser-mock {
    width:74%;
  }
  .document-mock {
    width:70%;
  }
  .task-progress {
    font-size:8px;
    padding:12px;
    gap:8px;
  }
  .desktop-bar {
    font-size:8px;
    padding:12px;
  }
  .task-output {
    font-size:10px;
  }
  .hms-method {
    display:block;
  }
  .method-list {
    margin-top:30px;
  }
  .method-list article {
    gap:15px;
  }
  .install-section {
    grid-template-columns:1fr;
    padding:30px 20px;
    gap:28px;
  }
  .install-section h2 {
    font-size:36px;
  }
  .install-card {
    padding:20px 15px;
  }
  .install-section .command {
    padding:15px;
    font-size:12px;
  }
  .install-links {
    flex-wrap:wrap;
    gap:10px;
  }
  .install-section p:not(.eyebrow) {
    font-size:13px;
  }
  .install-card p.small {
    font-size:11px;
  }
  .boundary-grid {
    grid-template-columns:1fr;
    gap:30px;
    margin-top:25px;
  }
  .boundary-grid>article+article {
    border-left:0;
    padding-left:0;
    border-top:1px solid var(--line);
    padding-top:28px;
  }
  .boundary-grid h3 {
    font-size:25px;
  }
  .boundary-grid p {
    font-size:14px;
  }
  .page-intro,.guide-intro {
    padding:37px 0;
  }
  .page-intro h1,.guide-intro h1 {
    font-size:48px;
  }
  .page-intro .lede,.guide-intro .lede {
    font-size:22px;
    margin-top:23px;
  }
  .page-intro>p:last-child:not(.lede) {
    font-size:14px;
  }
  .results-explorer {
    padding:20px 16px;
  }
  .results-explorer>.strip-heading h2 {
    font-size:15px;
  }
  .js .workload-buttons {
    margin-top:20px;
    display:grid!important;
    grid-template-columns:repeat(3,1fr);
  }
  .workload-buttons button {
    font-size:10px;
    padding:12px 8px;
  }
  .workload-buttons button span {
    font-size:8px;
  }
  .explorer-summary {
    grid-template-columns:1fr;
    gap:24px;
    padding:26px 0;
  }
  .big-result {
    font-size:76px;
  }
  .explorer-summary h3 {
    font-size:16px;
  }
  .explorer-summary p:not(.eyebrow,.big-result) {
    font-size:11px;
  }
  .result-bars {
    gap:12px;
  }
  .bar {
    height:28px;
    line-height:28px;
    font-size:10px;
  }
  .result-details {
    grid-template-columns:1fr;
    gap:15px;
    padding:20px 0;
  }
  .result-details>div {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }
  .result-details>div+div {
    border-left:0;
    padding-left:0;
  }
  .result-details .tiny-label {
    font-size:8px;
    max-width:135px;
  }
  .result-details strong {
    font-size:23px;
    margin-top:0;
  }
  .result-caveat {
    font-size:11px;
  }
  .table-scroll {
    margin-top:25px;
  }
  .notebook-note {
    padding:27px 22px;
  }
  .notebook-note h2 {
    font-size:30px;
  }
  .notebook-note p:not(.eyebrow) {
    font-size:13px;
  }
  .guide-layout {
    display:block;
    padding:23px 0 50px;
  }
  .contents {
    position:static;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px 16px;
    border-bottom:1px solid var(--ink);
    padding-bottom:22px;
    margin-bottom:35px;
  }
  .contents .eyebrow {
    grid-column:1/-1;
    margin:0 0 3px;
  }
  .contents>a {
    font-size:11px;
    padding:5px 0;
    min-height:30px;
  }
  .guide-body h2 {
    font-size:34px;
    margin-bottom:21px;
  }
  .guide-body p,.guide-body li {
    font-size:14px;
  }
  .guide-body section {
    margin-bottom:32px;
    padding-bottom:32px;
  }
  .light-command {
    padding:16px;
    flex-direction:column;
    font-size:12px;
  }
  .command-list code {
    font-size:11px;
  }
  .guide-body .note p {
    font-size:12px;
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
  }
  .figure-controls [data-motion] {
    display:none!important;
  }
}
@media print {
  .page-shell {
    width:100%;
  }
  .edition,.masthead nav,.figure-controls,.footer,.enhanced,.contents {
    display:none!important;
  }
  body {
    background:white;
    color:#111;
  }
  a {
    color:inherit;
  }
  .hero {
    padding:25px 0;
  }
  .section-space {
    padding:25px 0;
  }
  .story,.metric,.boundary-grid article {
    break-inside:avoid;
  }
  .guide-layout {
    display:block;
  }
  .hms-feature,.hms-hero {
    background:#eee;
    color:#111;
  }
  .hms-feature p:not(.eyebrow),.hms-hero .hero-detail {
    color:#333;
  }
}

/* Instrument-panel treatment: the editorial grid carries the character. */
::selection { background:var(--selection); color:var(--selection-ink); }
h1,h2 { font-weight:400; letter-spacing:-.045em; }
h3 { letter-spacing:-.025em; }
em { font-style:normal; }
.masthead { gap:26px; border-bottom-width:1px; min-height:116px; }
.wordmark { font-weight:500; letter-spacing:-.065em; }
.brand-point { color:var(--accent); }
.masthead nav a[aria-current]:after { height:1px; }
.theme-toggle {
  align-items:center;
  gap:10px;
  margin-left:5px;
  padding:8px 0 8px 20px;
  min-height:44px;
  background:none;
  border:0;
  border-left:1px solid var(--line);
  color:var(--muted);
  font:10px/1.5 var(--mono);
}
.theme-toggle:hover { color:var(--ink); }
.hero { grid-template-columns:43% 57%; gap:0; }
.hero h1 { font-size:clamp(48px,4.8vw,72px); }
.hero .lede { font:400 21px/1.5 var(--sans); letter-spacing:-.02em; }
.hero-detail { line-height:1.8; }
.button,.button-light,.hms-hero .button {
  color:var(--on-accent);
  background:var(--accent);
  border-color:var(--accent);
  box-shadow:none;
  transition:background .15s ease,border-color .15s ease;
}
.button:hover,.button-light:hover,.hms-hero .button:hover {
  color:var(--on-accent);
  background:var(--accent-strong);
  border-color:var(--accent-strong);
  box-shadow:none;
  transform:none;
}
.button:active { transform:none; }
.technical-frame { margin-left:30px; }
.plate-stage-wrap { color:var(--ink); min-height:0; }
.technical-plate { display:block; width:100%; overflow:visible; }
.technical-plate path { vector-effect:non-scaling-stroke; }
.technical-frame figcaption { font-size:9px; border-color:var(--line); }
.figure-controls button { color:var(--accent); text-decoration:none; min-height:40px; }
.figure-controls button:hover { text-decoration:underline; }
.plate-label,.plate-code,.plate-mini { font-family:var(--mono); fill:var(--muted); font-weight:400; }
.plate-label { font-size:10px; letter-spacing:.7px; }
.plate-code { font-size:10px; }
.plate-mini { font-size:9px; letter-spacing:.5px; }
.plate-grid-line { fill:none; stroke:var(--line); stroke-width:.55; opacity:.42; }
.plate-rule { fill:none; stroke:var(--line-strong); stroke-width:.65; }
.plate-tick { fill:none; stroke:var(--line-strong); stroke-width:.6; opacity:.55; }
.plate-link { fill:none; stroke:var(--line-strong); stroke-width:.65; opacity:.36; }
.plate-sheet { fill:var(--paper); stroke:var(--line-strong); stroke-width:.8; }
.plate-plane { fill:var(--surface); stroke:var(--accent); stroke-width:.8; }
.plate-linework { fill:none; stroke:var(--muted); stroke-width:.7; opacity:.6; }
.plate-source-selected { fill:none; stroke:var(--blue); stroke-width:1.1; }
.plate-bracket { fill:none; stroke:var(--accent); stroke-width:1; }
.plate-selected-link { fill:none; stroke:var(--accent); stroke-width:.85; opacity:.65; }
.plate-return { fill:none; stroke:var(--blue); stroke-width:.6; stroke-dasharray:3 5; opacity:.65; }
.plate-boundary { fill:var(--surface); stroke:var(--blue); stroke-width:.7; stroke-dasharray:3 5; }
.plate-selection { fill:var(--selection); stroke:var(--accent); stroke-width:.6; }
.plate-result { fill:var(--paper); stroke:var(--positive); stroke-width:.8; }
.plate-result-check { fill:var(--positive); font:17px var(--mono); }
.plate-flow { fill:none; stroke-width:1.8; opacity:0; stroke-dasharray:12 88; }
path.plate-accent { stroke:var(--accent); }
text.plate-accent { fill:var(--accent); }
text.plate-blue { fill:var(--blue); }
text.plate-cyan { fill:var(--cyan); }
text.plate-positive { fill:var(--positive); }
path.plate-positive { stroke:var(--positive); }
.tracing .plate-flow { animation:trace-path 2.6s cubic-bezier(.3,0,.2,1) var(--trace-delay,0s) 1 both; }
@keyframes trace-path {
  0% { stroke-dashoffset:100; opacity:0; }
  15% { opacity:1; }
  85% { opacity:1; }
  100% { stroke-dashoffset:-100; opacity:0; }
}
.metric-number { font-family:var(--mono); font-size:45px; font-weight:400; letter-spacing:-.065em; }
.metric h3 { font-weight:500; }
.results-strip { border-top-width:1px; }
.strip-heading>span { letter-spacing:.02em; }
.window-bar,.desktop-bar,.mock-chrome { background:var(--surface); color:var(--muted); }
.window-bar i { border-radius:0; width:4px; height:4px; }
.step-button[aria-pressed=true] { background:var(--surface); border-left-width:1px; padding-left:11px; }
.demo-window { border-color:var(--line); box-shadow:none; }
.prompt { font:18px/1.6 var(--sans); }
.recall-result p { font-family:var(--sans); }
mark { color:var(--selection-ink); }
.square-check { background:var(--surface); border:1px solid var(--line); }
.chart-art,.quote-art,.clients-art { border:1px solid var(--line); background:var(--surface); }
.chart-art>i { height:13px; background:var(--bar-color,var(--line-strong)); }
.chart-art>b { font:400 19px/1.3 var(--sans); letter-spacing:-.025em; }
.quote-art>b { font:400 23px/1.4 var(--sans); letter-spacing:-.025em; }
.clients-art>span { background:var(--paper); }
.clients-art>div { font:18px/1.4 var(--mono); color:var(--muted); }
.hms-feature { background:var(--surface); color:var(--ink); border:1px solid var(--line); }
.hms-feature .eyebrow { color:var(--muted); }
.hms-feature h2 em { color:var(--accent); }
.hms-feature p:not(.eyebrow) { color:var(--muted); }
.session-terminal { width:100%; font:11px/1.6 var(--mono); border:1px solid var(--line-strong); }
.terminal-heading { display:flex; justify-content:space-between; padding:13px 16px; border-bottom:1px solid var(--line); color:var(--muted); }
.terminal-line { display:flex; align-items:center; gap:10px; padding:19px 15px; border-bottom:1px solid var(--line); }
.terminal-line b { color:var(--accent); font-weight:400; }
.line-number { color:var(--muted); font-size:9px; }
.terminal-tag { color:var(--positive); margin-left:auto; font-size:8px; }
.terminal-footer { display:flex; justify-content:space-between; gap:10px; padding:14px; color:var(--muted); font-size:8px; }
.hms-feature-art>.mono-label { color:var(--muted); font-size:9px; margin-top:18px; }
.hms-hero { background:var(--surface); border:1px solid var(--line); color:var(--ink); padding:48px 34px; }
.hms-hero h1 { font-size:clamp(42px,4.2vw,62px); }
.hms-hero .plate-stage-wrap { background:none; }
.hms-hero .plate-sheet { fill:var(--surface); }
.hms-hero .plate-boundary { fill:var(--paper); }
.hms-hero .plate-result { fill:var(--surface); }
.hms-hero h1 em { color:var(--accent); }
.hms-hero .hero-detail,.hms-hero .compatibility { color:var(--muted); }
.hms-hero .status { color:var(--positive); border-color:var(--line-strong); }
.hms-hero .technical-frame figcaption { color:var(--muted); border-color:var(--line); }
.hms-hero .text-link:hover,.hms-hero .figure-controls button:hover { color:var(--accent-strong); }
.hms-hero .technical-frame { margin-left:20px; }
.task-slip { background:var(--surface); }
.task-slip blockquote { font-family:var(--sans); font-size:25px; }
.task-desktop { background:var(--paper); }
.browser-mock,.document-mock { border-color:var(--line-strong); box-shadow:none; background:var(--paper); }
.mock-chrome { border-color:var(--line); }
.mock-line { background:var(--line); }
.install-section { border-top-width:1px; background:var(--surface); }
.install-card { box-shadow:none; border-color:var(--line-strong); background:var(--paper); }
.command { background:var(--surface); color:var(--ink); border:1px solid var(--line); }
.command button { color:var(--accent); border-color:var(--line-strong); }
.command button:hover { background:var(--selection); color:var(--selection-ink); }
.results-explorer { background:var(--surface); border-color:var(--line-strong); }
.big-result { font-family:var(--mono); letter-spacing:-.075em; }
.workload-buttons button[aria-pressed=true] { background:var(--selection); color:var(--selection-ink); }
.workload-buttons button[aria-pressed=true]>span { color:var(--selection-ink); }
.bar { color:var(--on-accent); }
.result-details strong { font-family:var(--mono); font-size:23px; }
.notebook-note { border-left-width:1px; }
.note { border-left-width:1px; }
.footer { border-top-width:1px; }
.footer .wordmark { font-size:38px; }
@media(min-width:1600px) {
  .hero:not(.hms-hero) h1 { font-size:72px; }
}
@media(max-width:1150px) {
  .masthead { gap:20px; }
  .masthead nav { gap:20px; }
  .masthead-note { font-size:11px; padding-left:18px; }
  .technical-frame { margin-left:15px; }
  .hero h1 { font-size:57px; }
  .hms-hero h1 { font-size:50px; }
  .metric-number { font-size:40px; }
  .terminal-tag { display:none; }
}
@media(max-width:900px) {
  .masthead .wordmark { font-size:43px; }
  .masthead nav { gap:19px; font-size:13px; }
  .theme-toggle { padding-left:15px; margin:0; }
  .hero h1 { font-size:48px; }
  .hero .lede { font-size:20px; }
  .metric-number { font-size:35px; }
  .metric-number>span { font-size:18px; }
  .hms-hero h1 { font-size:44px; }
  .hms-hero { padding:35px 25px; }
  .session-terminal { font-size:10px; }
  .terminal-line { gap:6px; padding:17px 10px; }
  .terminal-footer { flex-direction:column; }
  .quote-art>b { font-size:20px; }
}
@media(max-width:680px) {
  .masthead { min-height:0; padding-top:23px; gap:15px; }
  .masthead:after { display:none; }
  .masthead .wordmark { font-size:40px; }
  .theme-toggle { margin-left:auto; padding-left:14px; }
  .masthead nav { gap:0; font-size:12px; }
  .hero h1 { font-size:clamp(42px,10.6vw,61px); }
  .hero .lede { font-size:20px; }
  .technical-frame { margin:30px 0 0; }
  .plate-stage-wrap>svg { margin:0; }
  .technical-frame figcaption { flex-wrap:nowrap; font-size:8px; }
  .technical-frame .figure-controls button { font-size:10px; }
  .metric-number { font-size:40px; }
  .metric-number>span { font-size:20px; }
  .session-terminal { max-width:400px; font-size:11px; }
  .terminal-tag { display:inline; }
  .terminal-footer { flex-direction:row; }
  .hms-hero { padding:30px 19px 16px; }
  .hms-hero h1 { font-size:40px; }
  .hms-hero .technical-frame { margin:30px 0 0; }
  .hms-hero .plate-stage-wrap>svg { width:100%; margin:0; }
  .hms-hero .hero-detail { font-size:14px; }
  .hms-feature { padding:32px 23px; }
  .quote-art>b { font-size:25px; }
  .chart-art>b { font-size:21px; }
  .clients-art>div { font-size:20px; }
  .result-details strong { font-size:21px; }
  .big-result { font-size:65px; }
}
@media(prefers-reduced-motion:reduce) {
  .technical-plate * { animation:none!important; }
  .figure-controls [data-motion] { display:none!important; }
}