/* fantagram.ai — direction C, "Spec sheet". One stylesheet, no JS. Mobile first.
   Lines and type do the work: rules between rows, a border only around drawings and screenshots.
   Light and dark follow prefers-color-scheme; both palettes are tuned for WCAG AA. */

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-latin-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light dark;

  --bg: #F7F8F9;
  --surface: #FFFFFF;
  --sunken: #F1F3F5;
  --ink: #0E1013;
  --ink-2: #454A52;
  --ink-3: #5C626B;
  --rule: #E2E5E9;
  --rule-2: #C8CDD3;
  --signal: #FF5A1F;      /* marks, lines, dots: never small text */
  --signal-ink: #B2400B;  /* the same hue, dark enough for text and focus rings */
  --on-ink: #FFFFFF;

  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --gutter: 16px;
  --section: 72px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0C0D0F;
    --surface: #131518;
    --sunken: #101114;
    --ink: #ECEEF0;
    --ink-2: #A9AEB5;
    --ink-3: #8F959D;
    --rule: #23262B;
    --rule-2: #353940;
    --signal: #FF6A2E;
    --signal-ink: #FF8A55;
    --on-ink: #0C0D0F;
  }
}

@media (min-width: 375px) { :root { --gutter: 20px; } }
@media (min-width: 640px) { :root { --gutter: 32px; } }
@media (min-width: 1024px) { :root { --gutter: 40px; --section: 112px; } }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 16px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

main { flex: 1 0 auto; }

img, svg { display: block; max-width: 100%; }

h1, h2, h3 { margin: 0; text-wrap: balance; }

p { margin: 0; text-wrap: pretty; }

b { font-weight: 600; color: var(--ink); }

code { font-family: var(--mono); font-size: 0.9em; }

.nw { white-space: nowrap; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--signal-ink);
  outline-offset: 2px;
}

main:focus { outline: none; }

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 10;
  padding: 8px 12px;
  background: var(--ink);
  color: var(--bg);
  font-size: 0.9375rem;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

.wrap {
  max-width: calc(75rem + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.ico { flex: none; }

/* Header */

.site-header { border-bottom: 1px solid var(--rule); }

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 60px;
}

.brand { display: block; flex: none; margin-right: auto; }
.brand img { height: 28px; width: auto; }

@media (prefers-color-scheme: dark) {
  .brand img { filter: invert(1) brightness(0.93); }
}

.nav {
  display: flex;
  gap: 4px 26px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
}

.nav a {
  display: block;
  padding: 10px 0;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
}
.nav a:hover { color: var(--ink); }

@media (max-width: 899.98px) {
  .nav-extra { display: none; }
}
@media (max-width: 374.98px) { .bar { gap: 12px; } }

/* Language toggle, top right: one cell per language, each label in its own script; the current one carries the
   accent. Below 480px and at 900–1199px (where the full nav is out) each cell shows one character; the full name
   stays in the link for screen readers, so the accessible name is always the language's own name. */
.langs { flex: none; }
.lang-list {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--rule-2);
  border-radius: 2px;
}
.lang-list li + li { border-left: 1px solid var(--rule); }
.lang-list a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1;
  color: var(--ink-3);
  text-decoration: none;
}
.lang-list a:hover { color: var(--ink); background: var(--sunken); }
.lang-list a[aria-current] {
  color: var(--signal-ink);
  font-weight: 500;
  background: var(--surface);
  box-shadow: inset 0 -2px 0 var(--signal);
}
.lt-f {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (min-width: 480px) and (max-width: 899.98px), (min-width: 1200px) {
  .lang-list a { padding-inline: 9px; }
  .lang-list a:not([hreflang="en"]) .lt-f {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
  }
  .lang-list a:not([hreflang="en"]) .lt-s { display: none; }
}

/* Hero: the headline, the one-paragraph introduction and an address. The first product shows just below it. */

.hero { padding-block: 40px 36px; }
@media (min-width: 640px) { .hero { padding-block: 56px 40px; } }
@media (min-width: 1024px) { .hero { padding-block: 80px 48px; } }

h1 {
  max-width: 13em;
  font-size: clamp(2.25rem, 1.55rem + 3.4vw, 4.25rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.028em;
  margin-bottom: 24px;
}

.hero-sub {
  max-width: 36rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink-2);
}
@media (min-width: 640px) { .hero-sub { font-size: 1.1875rem; } }

.hero-mail { margin-top: 20px; font-size: 1rem; }

/* Buttons: only the 404 page has them */

.cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid var(--rule-2);
  border-radius: 2px;
  background: var(--surface);
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
}
.btn:hover { border-color: var(--ink); }

.btn-primary {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-ink);
}
.btn-primary:hover { background: var(--ink-2); border-color: var(--ink-2); }

@media (max-width: 479.98px) {
  .lost .cta .btn { flex: 1 1 100%; justify-content: center; }
}

/* Sections: a hairline on top and one number per section. On wide screens most sections keep their title in a
   sticky left column; Products runs the full width and Security design reads as one long column. */

.section { padding-top: var(--section); }
.hero + .section { padding-top: 16px; }
.section-last { padding-bottom: var(--section); }

.sec {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
}

.sec-head {
  padding-top: 16px;
  border-top: 1px solid var(--ink);
}

h2 {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: clamp(1.625rem, 1.35rem + 1.2vw, 2.125rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.sec-n {
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-3);
  transform: translateY(-0.2em);
}

.sec-meta {
  max-width: 30rem;
  margin-top: 10px;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-2);
}

@media (min-width: 1024px) {
  .sec {
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    column-gap: 48px;
    row-gap: 0;
    border-top: 1px solid var(--ink);
  }
  .sec-head {
    position: sticky;
    top: 24px;
    align-self: start;
    border-top: 0;
    padding-top: 20px;
  }
  .sec > :not(.sec-head) { grid-column: 2; }
  .sec > .sec-body { padding-top: 20px; }

  .sec-wide, .sec-long { grid-template-columns: minmax(0, 1fr); }
  .sec-wide > :not(.sec-head), .sec-long > :not(.sec-head) { grid-column: 1; }
  .sec-wide .sec-head, .sec-long .sec-head { position: static; }
  .sec-wide > .products { padding-top: 36px; }
  .sec-long > .sec-body { max-width: 46rem; padding-top: 32px; }
}

h3 {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

/* Products: one row each, the screenshot first. On wide screens the screenshot takes 7 of 12 columns on the left
   for all three (no zigzag); the two web products show a browser-width capture, Krypton two phone screens. */

.products {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.products > li + li {
  margin-top: 44px;
  padding-top: 36px;
  border-top: 1px solid var(--rule);
}

.product {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "shot" "text" "spec" "foot";
  row-gap: 20px;
}

.p-head {
  grid-area: head;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 10px;
}
.p-head h3 { font-size: 1.375rem; }
.mark { flex: none; width: 20px; height: 20px; }
img.mark { border-radius: 3px; }
.mark-krypton { width: 26px; color: var(--ink); }
.p-status {
  flex-basis: 100%;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-2);
}

.p-text { grid-area: text; }
.spec { grid-area: spec; }
.p-foot { grid-area: foot; }

@media (min-width: 720px) {
  .product {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    grid-template-areas: "head head" "shot shot" "text spec" "foot foot";
    column-gap: 36px;
    row-gap: 24px;
  }
}
@media (min-width: 1024px) {
  .products > li + li { margin-top: 64px; padding-top: 56px; }
  .product {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas: "shot head" "shot text" "shot spec" "shot foot";
    column-gap: 48px;
    row-gap: 20px;
  }
  .shot { align-self: start; }
}

/* Screenshots: the product as it is, in a plain frame. Web pages carry a thin address bar (address only);
   phone screens get rounded corners and nothing else (no bezel, notch or shadow). Below 720px the web products
   switch to their phone capture. */

.shot { grid-area: shot; min-width: 0; margin: 0; }
.shot img { display: block; width: 100%; height: auto; }
.shot-frame {
  overflow: hidden;
  border: 1px solid var(--rule-2);
  border-radius: 4px;
  background: var(--surface);
}
.shot-bar {
  height: 28px;
  padding: 0 12px;
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
  background: var(--sunken);
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 27px;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--ink-3);
}
.shot figcaption {
  margin-top: 10px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-3);
}
@media (max-width: 719.98px) {
  .shot-web .shot-frame { width: 240px; max-width: 100%; border-radius: 28px; }
  .shot-web .shot-bar { display: none; }
}
@media (min-width: 720px) and (max-width: 1023.98px) {
  .shot-web .shot-frame { max-width: 760px; }
}

.shot-pair { display: flex; gap: 12px; align-items: flex-start; }
.shot-pair img {
  width: calc((100% - 12px) / 2);
  max-width: 220px;
  border: 1px solid var(--rule-2);
  border-radius: 18px;
  background: var(--surface);
}
@media (min-width: 375px) { .shot-pair img { border-radius: 20px; } }
@media (min-width: 720px) { .shot-pair img { width: 220px; border-radius: 26px; } }
@media (min-width: 1024px) { .shot-pair img { width: calc((100% - 12px) / 2); max-width: 300px; border-radius: 28px; } }

@media (prefers-color-scheme: dark) {
  .shot-light img { filter: brightness(0.9); }
}

.lede {
  margin-bottom: 12px;
  font-size: 1.0625rem;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: -0.005em;
}

.points {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-2);
}
.points li + li { margin-top: 8px; }

.fine {
  margin-top: 14px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-3);
}
.fine [lang="ko"] { word-break: keep-all; white-space: nowrap; }

/* Labels in tables and term lists: plain sentence-case Sans. Mono is kept for things read literally:
   addresses, primitive names, code, the drawings and the language toggle. */
.spec dt, .sheet dt, .facts dt, .grid-table thead th, .sees-h {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-3);
}

.spec {
  align-self: start;
  margin: 0;
  border-top: 1px solid var(--ink);
  font-size: 0.875rem;
  line-height: 1.5;
}
.spec > div {
  display: grid;
  grid-template-columns: 5.25rem minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid var(--rule);
}
.spec dd { margin: 0; }
.stack { margin: 0; padding: 0; list-style: none; }
/* One layer per line; a wrapped layer hangs so it never reads as a new one */
.stack li { padding-left: 0.875rem; text-indent: -0.875rem; }
.stack li + li { margin-top: 5px; }

.p-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 24px;
  font-size: 0.875rem;
}
.p-foot .out { font-family: var(--mono); font-size: 0.8125rem; }
.p-figs { display: inline-flex; flex-wrap: wrap; gap: 6px 24px; }
.p-fig {
  color: var(--ink-2);
  text-decoration-line: underline;
  text-decoration-color: var(--rule-2);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.p-fig:hover { color: var(--ink); text-decoration-color: var(--signal); }

.out {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  color: var(--ink);
  text-decoration-line: underline;
  text-decoration-color: var(--rule-2);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.out:hover { text-decoration-color: var(--signal); text-decoration-thickness: 2px; }

.note {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-3);
}

/* Figure and table titles: a plain subheading, no "Fig. n" */

sup { line-height: 0; font-size: 0.7em; margin-left: 2px; }
.fig { margin: 48px 0 0; }

.fig-cap {
  margin-bottom: 12px;
  font-size: 1rem;  /* 17 → 16: one step under the product subheading, not a jump above the body text (2026-10-08) */
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-align: left;
  caption-side: top;
}
caption.fig-cap { display: table-caption; }

/* Section 02: one block per product, each with figures drawn in the sheet's own lines */

.sub + .sub { margin-top: 64px; }

.sub-h {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.sub-lede {
  max-width: 42rem;
  margin-top: 8px;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-2);
}
.sub .fig { margin-top: 28px; }
.sub .fig + .fig { margin-top: 44px; }

.fig-frame {
  background: var(--surface);
  border: 1px solid var(--rule-2);
}
.fig-draw { padding: 18px 6px; }
@media (min-width: 375px) { .fig-draw { padding: 20px 16px; } }
@media (min-width: 640px) { .fig-draw { padding: 28px 24px 26px; } }

/* Two drawings per figure. The wide one needs about 760px of drawing width to keep its text near 12px, which it
   has at 900–1023px (one column) and from 1200px (the 9-of-12 column). Elsewhere the stacked one is shown:
   it is 290 units wide, so at 320px it draws at about 0.95x and never above 1x — both drawings stop at their own width,
   so the text in a figure is never larger than set below (2026-10-08 owner: "작동방식등의 갑자기 폰트가 커지는 쪽들 폰트 줄여줘"
   — the stacked drawing used to grow to 1.25x on phones, putting 13px labels at about 16px, above the 15px body text).
   Only the visible drawing is laid out, so screen readers meet neither (both are aria-hidden; the key is the text). */
.fg { display: block; width: 100%; height: auto; overflow: visible; }
.fg-wide { display: none; max-width: 760px; margin-inline: auto; }
.fg-narrow { max-width: 290px; margin-inline: auto; }
@media (min-width: 900px) and (max-width: 1023.98px), (min-width: 1200px) {
  .fg-wide { display: block; }
  .fg-narrow { display: none; }
}
/* Tablet and the narrower desktop column: the stacked drawing on the left, its key beside it */
@media (min-width: 720px) and (max-width: 899.98px), (min-width: 1024px) and (max-width: 1199.98px) {
  .fig-frame {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
  }
  .fig-draw { grid-row: 1 / span 2; border-right: 1px solid var(--rule); }
  .fig-key, .fig-note { grid-column: 2; }
  .fig-key { border-top: 0; align-content: start; }
}

.fg text { font-family: var(--sans); }  /* the body face, not mono — mono spread Korean words apart and read larger than the page text */
.fg .f-t { font-size: 12px; fill: var(--ink-2); }
.fg-narrow .f-t { font-size: 12.5px; }
.fg .f-h { font-size: 11px; font-weight: 500; fill: var(--ink-3); }
.fg-narrow .f-h { font-size: 11px; }
.fg .f-s { font-size: 11px; fill: var(--ink-3); }
.fg-narrow .f-s { font-size: 11px; }
.fg .f-b { font-weight: 500; fill: var(--ink); }
.fg .f-ta { fill: var(--signal-ink); }  /* step numbers stay in the label colour; the accent is for seals and checks */

.fg .f-box { fill: var(--surface); stroke: var(--rule-2); }
.fg .f-frame { fill: none; stroke: var(--rule-2); }
.fg .f-bg { fill: var(--surface); }
.fg .f-rule { fill: none; stroke: var(--rule); }
.fg .f-rule2 { fill: none; stroke: var(--rule-2); }
.fg .f-line { fill: none; stroke: var(--ink-3); }
.fg .f-edge { fill: none; stroke: var(--rule-2); stroke-width: 1.25; }
.fg .f-arrow { fill: var(--ink-3); }
.fg .f-acc { fill: none; stroke: var(--signal); stroke-width: 1.25; }
.fg .f-w15 { stroke-width: 2; }
.fg .f-dash { stroke-dasharray: 4 3; }
.fg .f-arrow-acc { fill: var(--signal); }
.fg .f-core { fill: var(--bg); stroke: var(--ink-3); stroke-dasharray: 3 3; }
.fg .f-icon { fill: none; stroke: var(--ink-2); stroke-width: 1.25; }
.fg .f-icon-acc { fill: none; stroke: var(--signal); stroke-width: 1.25; }
.fg .f-hatch { fill: none; stroke: var(--rule-2); stroke-width: 1; }
.fg .f-ink { fill: var(--ink); }
.fg .f-gate { fill: var(--surface); stroke: var(--signal); stroke-width: 1.5; }
.fg .f-ring { fill: none; stroke: var(--rule-2); stroke-dasharray: 2 3; }
.fg .f-node { fill: var(--surface); stroke: var(--ink-2); stroke-width: 1.5; }
.fg .f-node-acc { fill: var(--signal); stroke: var(--signal); stroke-width: 1.5; }
.fg .f-you { fill: var(--surface); stroke: var(--signal); stroke-width: 1.75; }
.fg .f-card { fill: var(--surface); stroke: var(--ink-3); }
.fg .f-env { fill: var(--surface); stroke: var(--ink-2); }
.fg .f-env-acc { fill: var(--surface); stroke: var(--signal); stroke-width: 1.5; }


/* The key under each drawing: the same information as text, numbered like the drawing */
.fig-key {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 14px 14px 16px;
  border-top: 1px solid var(--rule);
  list-style: none;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--ink-2);
}
@media (min-width: 375px) { .fig-key { padding-inline: 16px; } }
@media (min-width: 640px) { .fig-key { padding: 16px 24px 18px; } }
.fig-key li {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
}
.fig-key .k {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.8;
  color: var(--ink-3);
}
.fig-key p { max-width: 46rem; }
.fig-key b { font-weight: 600; }
.fig-key-lead li { display: block; }
@media (max-width: 719.98px) {
  /* Figs. 1 and 2: on phones the stacked drawing carries every line of the key, so there the key stays for screen readers only */
  .fig-key-wide {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}
.fig-key-lead li + li { padding-top: 8px; border-top: 1px solid var(--rule); }

.fig-note {
  padding: 0 14px 16px;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--ink-2);
}
@media (min-width: 375px) { .fig-note { padding-inline: 16px; } }
@media (min-width: 640px) { .fig-note { padding: 0 24px 18px; } }
.fig-note a, .sheet a {
  color: var(--ink);
  text-decoration-color: var(--rule-2);
  text-underline-offset: 3px;
}
.fig-note a:hover, .sheet a:hover { text-decoration-color: var(--signal); }

/* Section 03: book tables. A rule in ink on top, hairlines between rows, no boxes and no shaded header bands. */

.sec-body > .fig-first { margin-top: 0; }

.grid-table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--ink);
  font-size: 0.875rem;
  line-height: 1.5;
}
.grid-table th,
.grid-table td {
  padding: 11px 16px 12px 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}
.grid-table :is(th, td):last-child { padding-right: 0; }
.grid-table thead th { padding-block: 9px; line-height: 1.5; }

.prims tbody th {
  width: 13.5rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink);
}
.prims td { color: var(--ink-2); }
sup.pow { margin-left: 0; font-size: 0.75em; }

@media (max-width: 479.98px) {
  /* Narrow screens: name on its own line, use underneath */
  .prims, .prims tbody, .prims tr, .prims tbody th, .prims td { display: block; }
  .prims { border-top: 0; }
  .prims caption.fig-cap { display: block; }
  .prims thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .prims tbody { border-top: 1px solid var(--ink); }
  .prims tbody tr { padding: 11px 0 12px; border-bottom: 1px solid var(--rule); }
  .prims tbody th, .prims td { width: auto; padding: 0; border: 0; }
  .prims td { margin-top: 3px; }
}

.sheet {
  margin: 0;
  border-top: 1px solid var(--ink);
}
.sheet > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  padding: 11px 0 12px;
  border-bottom: 1px solid var(--rule);
}
.sheet dt { line-height: 1.6; }
.sheet dd {
  margin: 0;
  max-width: 44rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-2);
}
@media (min-width: 640px) {
  .sheet > div { grid-template-columns: 8.5rem minmax(0, 1fr); gap: 16px; align-items: baseline; }
}

.sees {
  display: grid;
  border-top: 1px solid var(--ink);
}
@media (min-width: 640px) { .sees { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } }
.sees-h {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 0 9px;
  border-bottom: 1px solid var(--rule);
  line-height: 1.5;
  letter-spacing: 0;
}
.sees-col + .sees-col { margin-top: 16px; }
@media (min-width: 640px) { .sees-col + .sees-col { margin-top: 0; } }
.sees-list {
  margin: 0;
  padding: 11px 0 0;
  list-style: none;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--ink-2);
}
.sees-list li { position: relative; padding-left: 16px; }
.sees-list li + li { margin-top: 7px; }
.sees-list li::before {
  content: "\2013";
  position: absolute;
  left: 0;
  color: var(--ink-3);
}

/* Section 04: a few facts, then what we have built, as a plain list */

.facts {
  display: grid;
  gap: 6px;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
}
.facts > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.facts dd { margin: 0; }
@media (min-width: 640px) {
  .facts > div { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); column-gap: 24px; align-items: baseline; }
}

.caps {
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
  line-height: 1.55;
}
.caps li {
  display: grid;
  gap: 2px;
  padding: 13px 0 14px;
  border-top: 1px solid var(--rule);
}
.caps li:last-child { border-bottom: 1px solid var(--rule); }
.cap-t { font-weight: 600; color: var(--ink); }
.cap-d { color: var(--ink-2); }
.cap-in { margin-top: 2px; font-size: 0.8125rem; color: var(--ink-3); }
@media (min-width: 760px) {
  .caps li { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); column-gap: 24px; }
  .cap-t { grid-row: 1 / span 2; }
  .cap-d, .cap-in { grid-column: 2; }
}

/* Contact */

.contact { display: grid; gap: 14px; justify-items: start; }

.mail {
  font-size: clamp(1.5rem, 1.1rem + 2.2vw, 2.5rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration-line: underline;
  text-decoration-color: var(--rule-2);
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
  overflow-wrap: anywhere;
}
.mail:hover { text-decoration-color: var(--signal); }

/* Footer: small and quiet */

.site-footer { border-top: 1px solid var(--rule); }

.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 32px;
  padding-block: 24px 28px;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--ink-3);
}
.foot a {
  color: var(--ink-2);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.foot a:hover { color: var(--ink); }

@media (max-width: 639.98px) {
  .corp .sep { display: none; }
  .corp .addr, .corp a { display: block; }
}

/* 404 */

.lost .hero-sub { margin-bottom: 0; }


/* Chinese, Japanese and Korean. Latin keeps the self-hosted IBM Plex (its unicode-range is Latin only); CJK text
   falls through to the system fonts listed for its language, so no CJK web font is downloaded. :lang() matches whole
   pages (<html lang>) and inline text in another language (the toggle's labels, the Korean company name). */

:lang(ko) {
  --sans: "IBM Plex Sans", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
  --mono: "IBM Plex Mono", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", ui-monospace, monospace;
  word-break: keep-all;
}
:lang(zh) {
  --sans: "IBM Plex Sans", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  --mono: "IBM Plex Mono", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", ui-monospace, monospace;
  line-break: strict;
}
:lang(ja) {
  --sans: "IBM Plex Sans", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", system-ui, sans-serif;
  --mono: "IBM Plex Mono", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", ui-monospace, monospace;
  line-break: strict;
}
/* An element marked with another language than its parent's takes that language's stack (font-family is inherited
   as a computed list, so the element has to ask for it). Mono contexts set their own (see .lang-list a). */
:where(body [lang]) { font-family: var(--sans); }


/* CJK pages: no tracking on headings and a little more room between lines */
:is(:lang(ko), :lang(zh), :lang(ja)) :is(h1, h2, h3, .lede, .sec-n) { letter-spacing: 0; }
:is(:lang(ko), :lang(zh), :lang(ja)) h1 { line-height: 1.22; }
:is(:lang(ko), :lang(zh), :lang(ja)) :is(h2, .sub-h, h3, .fig-cap) { line-height: 1.35; }
:is(:lang(ko), :lang(zh), :lang(ja)) :is(.hero-sub, .sec-meta, .sub-lede, .lede, .points, .fine, .note, .fig-key,
  .fig-note, .sheet dd, .sees-list, .grid-table, .spec, .facts, .caps, .p-status, .shot figcaption) {
  line-height: 1.75;
}
:is(:lang(ko), :lang(zh), :lang(ja)) .fig-key .k { line-height: 2.04; }

/* Motion: hover colour changes only, and none when reduced motion is asked for */

@media (prefers-reduced-motion: no-preference) {
  .btn, .out, .mail, .nav a, .lang-list a { transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease, text-decoration-color 120ms ease; }
}


/* Windows High Contrast and similar */

@media (forced-colors: active) {
  .brand img { filter: none; background: #FFFFFF; }
  .mark-krypton { color: CanvasText; }
  .shot-frame, .shot-pair img { border-color: CanvasText; }
  .fg text { fill: CanvasText; }
  .fg .f-box, .fg .f-bg, .fg .f-core, .fg .f-card, .fg .f-node, .fg .f-you, .fg .f-gate, .fg .f-env, .fg .f-env-acc { fill: Canvas; }
  .fg .f-box, .fg .f-frame, .fg .f-rule, .fg .f-rule2, .fg .f-line, .fg .f-edge, .fg .f-acc, .fg .f-core,
  .fg .f-icon, .fg .f-icon-acc, .fg .f-hatch, .fg .f-gate, .fg .f-ring, .fg .f-node, .fg .f-you, .fg .f-card,
  .fg .f-env, .fg .f-env-acc { stroke: CanvasText; }
  .fg .f-arrow, .fg .f-arrow-acc, .fg .f-ink, .fg .f-node-acc { fill: CanvasText; }
  .lang-list a[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
}

@media print {
  :root {
    --bg: #FFFFFF; --surface: #FFFFFF; --sunken: #FFFFFF;
    --ink: #000000; --ink-2: #333338; --ink-3: #55555C;
    --rule: #CCCCCC; --rule-2: #999999;
  }
  .skip, .site-header nav, .cta { display: none; }
  .brand img { filter: none; }
  .sec-head { position: static; }
}