/* One family draws both scripts: IBM Plex Sans for Latin, its Korean sibling for
   Hangul, and IBM Plex Mono for code. Drawn by the same team to the same proportions,
   so a mixed line keeps one weight and one rhythm. */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Sans+KR:wght@300;400;500;600;700&family=IBM+Plex+Mono:ital,wght@0,400;0,500;1,400&display=swap");

/* dioxus-compose guide: one hand-written stylesheet, no build step.
   Sections: tokens, reset, top bar, layout, typography, code, tables,
   callouts, landing, footer, responsive. */

/* ---------- tokens ---------- */
:root {
  color-scheme: light;

  --ink:        #16181d;
  --ink-soft:   #4a505c;
  --ink-faint:  #676e7c;
  --paper:      #fbfaf8;
  --surface:    #ffffff;
  --surface-2:  #f2f0ec;
  --line:       #e0dcd5;
  --line-soft:  #ebe8e2;

  --accent:     #a2432a;
  --accent-ink: #8d3a24;
  --accent-bg:  #f8ece7;

  --ok:         #2c6641;
  --ok-bg:      #e8f1ea;
  --warn:       #7d5a0d;
  --warn-bg:    #f7efdc;

  --code-bg:    #f6f4f0;
  --code-line:  #e5e1d9;
  --c-key:      #8d3a24;
  --c-type:     #285673;
  --c-str:      #3a6536;
  --c-num:      #6f428b;
  --c-com:      #7c828d;
  --c-fn:       #2b5169;
  --c-attr:     #64541f;

  --radius: 8px;
  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
          "IBM Plex Sans KR", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic",
          Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;
  --sans-ko: "IBM Plex Sans KR", "IBM Plex Sans", -apple-system, BlinkMacSystemFont,
             "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --measure: 70ch;

  /* A border that still reads against the page. --line is for dividers, which may
     recede; controls need an edge the eye can find. */
  --line-strong: #9c9382;   /* 3.0:1 on white, so a control's edge is findable */
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --ink:        #e8e6e1;
  --ink-soft:   #b4b2ab;
  --ink-faint:  #8e8c86;
  --paper:      #141519;
  --surface:    #181a1f;
  --surface-2:  #202329;
  --line:       #2e323a;
  --line-soft:  #24272d;

  --accent:     #e08a63;
  --accent-ink: #f0a582;
  --accent-bg:  #2a1d17;

  --ok:         #84c39a;
  --ok-bg:      #1a2620;
  --warn:       #dcba6d;
  --warn-bg:    #2a2317;

  --line-strong:#626a7a;    /* 3.2:1 on the dark surface */

  --code-bg:    #1b1e24;
  --code-line:  #2b2f37;
  --c-key:      #e08a63;
  --c-type:     #85b5d3;
  --c-str:      #96c88f;
  --c-num:      #c7a5e0;
  --c-com:      #7b818b;
  --c-fn:       #93bad6;
  --c-attr:     #cdbf82;
}

/* Same values, applied when the reader has expressed no explicit choice. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ink:#e8e6e1; --ink-soft:#b4b2ab; --ink-faint:#8e8c86;
    --paper:#141519; --surface:#181a1f; --surface-2:#202329;
    --line:#2e323a; --line-soft:#24272d; --line-strong:#626a7a;
    --accent:#e08a63; --accent-ink:#f0a582; --accent-bg:#2a1d17;
    --ok:#84c39a; --ok-bg:#1a2620; --warn:#dcba6d; --warn-bg:#2a2317;
    --code-bg:#1b1e24; --code-line:#2b2f37;
    --c-key:#e08a63; --c-type:#85b5d3; --c-str:#96c88f; --c-num:#c7a5e0;
    --c-com:#7b818b; --c-fn:#93bad6; --c-attr:#cdbf82;
  }
}

html[lang="ko"] body {
  font-family: var(--sans-ko);
  line-height: 1.78;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
html[lang="ko"] h1, html[lang="ko"] h2, html[lang="ko"] h3 { letter-spacing: -.012em; }
/* Code stays Latin: a Korean face would widen the monospace grid. */
html[lang="ko"] code, html[lang="ko"] pre, html[lang="ko"] kbd { font-family: var(--mono); }

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.68;
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
}
html[lang="ko"] body { line-height: 1.8; word-break: keep-all; }

a {
  color: var(--accent-ink);
  text-decoration-color: color-mix(in srgb, var(--accent) 38%, transparent);
  text-underline-offset: 3px;
}
a:hover { text-decoration-color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
img, svg { max-width: 100%; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 50;
  background: var(--surface); color: var(--ink);
  padding: .6rem 1rem; border: 1px solid var(--line); border-radius: var(--radius);
}
.skip:focus { left: 1rem; top: 1rem; }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: .8rem;
  padding: .7rem clamp(1rem, 4vw, 2.5rem);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
.brand {
  display: inline-flex; align-items: center; gap: .55rem;
  font-weight: 620; letter-spacing: -0.015em; font-size: 1rem;
  color: var(--ink); text-decoration: none;
}
.brand .dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--accent); }
.brand small { color: var(--ink-faint); font-weight: 450; font-size: .78rem; letter-spacing: .02em; }
.topbar .spacer { flex: 1; }

.ghost {
  appearance: none; cursor: pointer;
  background: transparent; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: .34rem .7rem; font: inherit; font-size: .82rem; line-height: 1.5;
}
.ghost:hover { background: var(--surface-2); color: var(--ink); }

.langswitch { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.langswitch a { padding: .34rem .62rem; font-size: .8rem; text-decoration: none; color: var(--ink-faint); }
.langswitch a[aria-current="true"] { background: var(--surface-2); color: var(--ink); font-weight: 620; }
.langswitch a + a { border-left: 1px solid var(--line); }

#navtoggle { display: none; }

/* ---------- layout ---------- */
.shell {
  display: grid;
  grid-template-columns: 16.5rem minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  max-width: 84rem; margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 3rem) 4rem;
}
.sidebar {
  position: sticky; top: 3.6rem; align-self: start;
  max-height: calc(100vh - 4.6rem); overflow-y: auto;
  padding: 2rem .5rem 2rem 0; font-size: .9rem;
}
.sidebar h2 {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--ink-faint); margin: 1.6rem 0 .5rem; font-weight: 640;
  border: 0; padding: 0;
}
.sidebar h2:first-child { margin-top: 0; }
.sidebar ul { list-style: none; margin: 0; padding: 0; }
.sidebar li { margin: 0; }
.sidebar a {
  display: block; padding: .3rem .7rem; border-radius: 6px;
  color: var(--ink-soft); text-decoration: none; border-left: 2px solid transparent;
}
.sidebar a:hover { background: var(--surface-2); color: var(--ink); }
.sidebar a[aria-current="page"] {
  color: var(--accent-ink); font-weight: 620;
  background: var(--accent-bg); border-left-color: var(--accent);
}

main { padding: 2.4rem 0 0; min-width: 0; }
main > * { max-width: var(--measure); }
main > .wide, main > figure, main > .tablewrap, main > .cards, main > .pagenav { max-width: none; }

/* ---------- typography ---------- */
h1 {
  font-size: clamp(2rem, 1.3rem + 2vw, 2.65rem); line-height: 1.16;
  letter-spacing: -0.026em; font-weight: 680; margin: 0 0 .6rem;
}
h2 {
  font-size: 1.42rem; line-height: 1.3; letter-spacing: -0.016em;
  font-weight: 650; margin: 3rem 0 .8rem; padding-top: .9rem;
  border-top: 1px solid var(--line-soft);
}
h1, h2, h3, h4 { scroll-margin-top: 4.5rem; }
h3 { font-size: 1.08rem; font-weight: 640; margin: 2rem 0 .5rem; letter-spacing: -0.008em; }
h4 { font-size: .95rem; font-weight: 640; margin: 1.5rem 0 .4rem; color: var(--ink-soft); }
p { margin: 0 0 1.05rem; }
.lede { font-size: 1.14rem; color: var(--ink-soft); line-height: 1.6; margin-bottom: 1.6rem; }
.eyebrow {
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); font-weight: 650; margin: 0 0 .7rem;
}
ul, ol { margin: 0 0 1.05rem; padding-left: 1.3rem; }
li { margin: .3rem 0; }
li > ul, li > ol { margin: .3rem 0; }
strong { font-weight: 640; }
hr { border: 0; border-top: 1px solid var(--line-soft); margin: 2.5rem 0; }
blockquote { margin: 1.4rem 0; padding: .1rem 0 .1rem 1.1rem; border-left: 3px solid var(--line); color: var(--ink-soft); }
dt { font-weight: 640; margin-top: .9rem; }
dd { margin: .2rem 0 0; color: var(--ink-soft); }

/* ---------- code ---------- */
code {
  font-family: var(--mono); font-size: .86em;
  background: var(--surface-2); border: 1px solid var(--line-soft);
  padding: .09em .34em; border-radius: 4px;
}
.codeblock {
  position: relative; margin: 1.3rem 0 1.6rem; max-width: none;
  border: 1px solid var(--code-line); border-radius: var(--radius);
  background: var(--code-bg); overflow: hidden;
}
.codeblock > figcaption {
  display: flex; align-items: center; gap: .6rem;
  padding: .42rem .85rem; font-size: .75rem; letter-spacing: .03em;
  color: var(--ink-faint); background: color-mix(in srgb, var(--code-bg) 55%, var(--surface-2));
  border-bottom: 1px solid var(--code-line);
  font-family: var(--mono);
}
.codeblock pre {
  margin: 0; padding: .95rem 1rem; overflow-x: auto;
  font-family: var(--mono); font-size: .845rem; line-height: 1.62; tab-size: 4;
}
.codeblock pre code { background: none; border: 0; padding: 0; font-size: inherit; }
.copy {
  position: absolute; top: .38rem; right: .45rem;
  opacity: 0; transition: opacity .12s ease;
  font: inherit; font-size: .72rem; padding: .22rem .5rem; cursor: pointer;
  background: var(--surface); color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 5px;
}
.codeblock:hover .copy, .copy:focus-visible { opacity: 1; }
.copy[data-done="true"] { color: var(--ok); border-color: var(--ok); opacity: 1; }

/* hand-written highlighting classes */
.k  { color: var(--c-key); font-weight: 600; }
.ty { color: var(--c-type); }
.s  { color: var(--c-str); }
.n  { color: var(--c-num); }
.c  { color: var(--c-com); font-style: italic; }
.f  { color: var(--c-fn); }
.at { color: var(--c-attr); }
.pn { color: var(--ink-soft); }

/* ---------- tables ---------- */
.tablewrap { overflow-x: auto; margin: 1.3rem 0 1.8rem; }
table { border-collapse: collapse; width: 100%; font-size: .92rem; }
th, td { text-align: left; padding: .58rem .8rem; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
th {
  font-weight: 640; color: var(--ink-faint); font-size: .76rem;
  letter-spacing: .06em; text-transform: uppercase; border-bottom-color: var(--line);
}
tbody tr:last-child td { border-bottom: 0; }
td code, th code { white-space: nowrap; }

.pill {
  display: inline-block; font-size: .74rem; font-weight: 620; letter-spacing: .02em;
  padding: .12rem .55rem; border-radius: 999px; white-space: nowrap;
}
.pill.works   { background: var(--ok-bg);    color: var(--ok); }
.pill.planned { background: var(--surface-2); color: var(--ink-faint); }
.pill.partial { background: var(--warn-bg);  color: var(--warn); }

/* ---------- callouts ---------- */
.note, .warn {
  margin: 1.4rem 0; padding: .85rem 1rem; font-size: .94rem;
  border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--surface);
}
.note > :last-child, .warn > :last-child { margin-bottom: 0; }
.note { border-left: 3px solid var(--accent); }
.warn { border-left: 3px solid var(--warn); background: var(--warn-bg); }
.note .label, .warn .label {
  display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 650; margin-bottom: .25rem; color: var(--ink-faint);
}

/* ---------- landing ---------- */
.hero { padding: 3.2rem 0 .5rem; max-width: none; }
.hero h1 { max-width: 18ch; }
.hero .lede { max-width: 54ch; }
.cta { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.8rem 0 0; }
.btn {
  display: inline-block; padding: .55rem 1.1rem; border-radius: var(--radius);
  font-size: .93rem; font-weight: 620; text-decoration: none;
  border: 1px solid var(--accent); background: var(--accent); color: #ffffff;
}
:root[data-theme="dark"] .btn:not(.secondary) { color: #17120f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn:not(.secondary) { color: #17120f; } }
.btn:hover { filter: brightness(1.06); }
.btn.secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn.secondary:hover { background: var(--surface-2); border-color: var(--accent); color: var(--accent-ink); filter: none; }

.cards {
  display: grid; gap: 1rem; margin: 1.4rem 0 0;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.card {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); padding: 1.05rem 1.15rem;
  text-decoration: none; color: inherit;
}
.card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.card h3 { margin: 0 0 .3rem; font-size: 1rem; }
.card p { margin: 0; color: var(--ink-soft); font-size: .9rem; }

/* ---------- page + site footer ---------- */
.pagenav {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-top: 3.5rem; padding-top: 1.2rem; border-top: 1px solid var(--line-soft);
  font-size: .92rem;
}
.pagenav span {
  display: block; font-size: .74rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-faint);
}
.pagenav .next { text-align: right; margin-left: auto; }
footer.site {
  border-top: 1px solid var(--line-soft);
  padding: 1.6rem clamp(1rem, 4vw, 2.5rem) 2.4rem;
  color: var(--ink-faint); font-size: .85rem;
}
footer.site .inner { max-width: 84rem; margin: 0 auto; display: flex; gap: 1.2rem; flex-wrap: wrap; }

/* ---------- responsive ---------- */
@media (max-width: 62rem) {
  #navtoggle { display: inline-block; }
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: static; max-height: none; overflow: visible;
    display: none; padding: 1rem 0; border-bottom: 1px solid var(--line-soft);
  }
  .sidebar.open { display: block; }
  main { padding-top: 1.6rem; }
  .hero { padding-top: 1.8rem; }
}
@media (max-width: 34rem) {
  body { font-size: 16px; }
  .brand small { display: none; }
  .topbar { gap: .5rem; padding-left: .9rem; padding-right: .9rem; }
  .copy { opacity: 1; }
  .shell { padding-bottom: 2.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}
@media print {
  .topbar, .sidebar, .copy, .pagenav { display: none; }
  .shell { display: block; }
}

/* ---------- landing page ---------- */
/* The landing page has no sidebar: it is one column, wider than the guide's
   reading measure, with the hero allowed to breathe. */
.landing main { max-width: 84rem; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 3rem); }
.landing .hero { padding: clamp(3rem, 9vw, 6rem) 0 0; text-align: left; }
.landing .hero h1 {
  font-size: clamp(2.3rem, 5.6vw, 4.2rem); line-height: 1.07;
  letter-spacing: -.03em; max-width: 24ch; margin: 0 0 1.1rem;
}
.landing .hero h1 .said { color: var(--accent); display: block; }
.landing .hero .lede { font-size: clamp(1.05rem, 2.2vw, 1.3rem); max-width: 58ch; color: var(--ink-soft); }
.landing .hero .sub { font-size: 1rem; color: var(--ink-faint); max-width: 56ch; margin-top: .3rem; }
.landing .cta { margin-top: 2rem; }
.landing .btn { padding: .68rem 1.35rem; font-size: 1rem; }

.showcase { display: grid; gap: 1.5rem; margin: 3.6rem 0 0; grid-template-columns: 1fr; }
@media (min-width: 62rem) { .showcase { grid-template-columns: 1.05fr .95fr; align-items: stretch; } }
.showcase pre {
  margin: 0; min-width: 0; overflow-x: auto;
  background: var(--code-bg); border: 1px solid var(--code-line);
  border-radius: var(--radius); padding: 1.45rem 1.6rem;
  font-family: var(--mono); font-size: .9rem; line-height: 1.72; tab-size: 4;
}
.showcase pre code { background: none; border: 0; padding: 0; font-size: inherit; }
/* The card sits beside the code block, so it drops the note's stacked margin and
   takes the same padding: both boxes then start on the same line. */
/* The code block is a tall fixed block, so the card matches its density with larger
   type and roomier padding rather than centring a small paragraph in empty space. */
.showcase .note {
  margin: 0; padding: 1.45rem 1.7rem;
  color: var(--ink-soft); font-size: 1.02rem; line-height: 1.68;
  display: flex; flex-direction: column; justify-content: center;
}
/* h2 carries a rule above it to separate sections in a document. Inside a card it
   reads as a stray line across the top. */
.showcase .note h2 {
  margin: 0 0 .85rem; padding-top: 0; border-top: 0;
  font-size: 1.32rem; line-height: 1.3;
  letter-spacing: -.018em; color: var(--ink);
}
.showcase .note p { margin: 0 0 .9rem; }
.showcase .note p:last-child { margin-bottom: 0; }

.metrics {
  display: grid; gap: 1px; margin: 3.4rem 0 0;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--radius);
  overflow: hidden;
}
.metric { background: var(--surface); padding: 1.15rem 1.2rem; }
.metric b { display: block; font-size: 1.5rem; letter-spacing: -.02em; }
.metric span { display: block; margin-top: .25rem; color: var(--ink-faint); font-size: .85rem; }

.landing section { margin-top: 3.6rem; }
.landing section > h2 { font-size: 1.45rem; letter-spacing: -.02em; }
.landing .fineprint { color: var(--ink-faint); font-size: .85rem; margin-top: .8rem; }
.landing footer.site { margin-top: 4rem; }

/* ---------- landing hero backdrop ---------- */
/* Recomposition, drawn literally. A widget tree stands beside the headline as a
   still hairline wireframe. At any moment one scope in it, and only one, lights
   up and settles back: the count, a row, the field, the caret. Nothing else
   moves, because nothing else changed. The animation obeys the rule it depicts,
   which is also why it is cheap: the whole field is static except an opacity
   fade on one small element at a time. */
/* main > * is clamped to the 70ch reading measure. The hero wrapper must opt out
   or the backdrop is positioned against 70ch while the hero sits in the 68rem
   column, which is what made the old version fight the content. */
/* The landing page is not a reading column: its sections are as wide as the page.
   Clamping them to the 70ch measure left the hero wider than everything under it. */
.landing main > * { max-width: none; }
.landing .herowrap { position: relative; isolation: isolate; padding-bottom: 2rem; }
.landing .herowrap .hero { position: relative; z-index: 1; }
.landing .herowrap .hero h1 { text-wrap: balance; }

.landing .backdrop {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
}

/* One still wash, no drifting fields: warmth over the top of the page, gone by
   the time it reaches the call to action. It rides on the body background, so it
   is full bleed by construction: no 100vw, which would overshoot by the width of
   a classic scrollbar, and so no clipping on the root, which would put the
   sticky top bar's scrollport in question. */
.landing body {
  background-image:
    radial-gradient(58% 100% at 26% 0%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 70%);
  background-repeat: no-repeat;
  background-size: 100% 34rem;
  background-position: 0 0;
}

/* The wireframe, anchored to the column's right edge, not the viewport. The headline runs to
   22ch and the lede to 56ch, so above 72rem the right of the column is empty
   and the diagram stands in that gap at every width, instead of drifting
   further from the text as the monitor gets wider. */
.landing .backdrop .tree {
  position: absolute; top: 50%; right: -1rem;
  width: 15rem; height: auto;
  transform: translateY(-48%);
  color: var(--ink);
  overflow: visible;
}
.landing .backdrop .tree .still {
  fill: none; stroke: currentColor; stroke-width: 1.25; opacity: .13;
}
.landing .backdrop .tree .still .caret { fill: currentColor; stroke: none; }
.landing .backdrop .tree .lit {
  fill: none; stroke: var(--accent); stroke-width: 1.5;
}
.landing .backdrop .tree .lit .caret { fill: var(--accent); stroke: none; }
.landing .backdrop .tree .lit > * {
  opacity: 0;
  animation: recompose 24s ease-in-out var(--at, 0s) infinite;
  will-change: opacity;
}

/* Visible for roughly three seconds in twenty-four. The delays are spaced so the
   scopes do not overlap and the pattern does not read as a loop. */
@keyframes recompose {
  0%   { opacity: 0; }
  1.5% { opacity: .85; }
  7%   { opacity: .85; }
  14%  { opacity: 0; }
  100% { opacity: 0; }
}

:root[data-theme="dark"] .landing .backdrop .tree .still { opacity: .17; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .landing .backdrop .tree .still { opacity: .17; }
}

/* Below 72rem the lede runs the full measure and there is no clear margin to
   stand the diagram in. Overlapping the words, or clipping the diagram at the
   viewport edge, both read as an accident, so it goes away and the wash carries
   the hero on its own. */
@media (max-width: 72rem) {
  .landing .backdrop .tree { display: none; }
}

/* Still, the field holds its shape and every scope rests lit at the same low
   value: the diagram reads, nothing pulses. */
@media (prefers-reduced-motion: reduce) {
  .landing .backdrop .tree .lit > * { animation: none; opacity: .3; }
}

/* A hairline hands the hero off to the page, on the column so it agrees with
   every other rule on the site. */
.landing .herowrap > .edge {
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: 0;
  background: linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent);
}

/* The accent line of the headline is the accent, flat. The backdrop no longer
   carries a second hue for it to echo. */
.landing .hero h1 .said { color: var(--accent); }

/* Three claims, stated plainly, directly under the call to action. */
.landing .claims { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.landing .claims li {
  display: inline-flex; align-items: center; gap: .45rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: blur(6px);
  padding: .34rem .8rem; font-size: .84rem; color: var(--ink-soft);
}
.landing .claims li::before {
  content: ""; width: .42rem; height: .42rem; border-radius: 50%;
  background: var(--accent); flex: none;
}