@font-face{font-family:'VZ Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/vz-sans-400.woff?v=3807345072) format('woff');}
@font-face{font-family:'VZ Sans';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/vz-sans-500.woff?v=3807345072) format('woff');}
@font-face{font-family:'VZ Sans';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/vz-sans-700.woff?v=3807345072) format('woff');}
/* Vizney Blocks site: the Vizney common header (the blog's header, kr.vizney.com · www.vizney.com: the blog is the
   reference and Blocks follows it), the line's tab row, then a white page. Text and frame are ink and grays; the one UI
   accent is the Vizney yellow #ffcc00 of the blog's post images (primary buttons, the current chart, focus, link underlines).
   Data colors live in the cards and chart tiles, and the orange JSON lines of the code view are data, not UI.
   One 1280px column (40px gutters, 16px on phones). Home: hero, live dashboard showcase, purpose index, chart tiles, usage.
   Category pages: sticky sidebar of chart types beside the cards; on phones the sidebar becomes a scrolling row. */
:root {
  --page: #ffffff;
  --soft: #f4f5f7;
  --tile: #f6f7f9;
  --ink: #1b1b1b;
  --ink-2: #4a4a4a;
  --muted: #616771;
  --line: #e6e8ec;
  --line-2: #eceef2;
  --rule: #cfd2d8;
  --yellow: #ffcc00;
  --yellow-2: #f2c200;
  --data: #fff4e5;
  --font: 'VZ Sans', 'Spoqa Han Sans Neo', 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', 'VZ Sans', monospace;
  --vzb-font: var(--font);
  --shadow: 0 12px 32px -12px rgba(17, 24, 39, 0.28);
  --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.12);
  color-scheme: light;
}
html { scroll-padding-top: calc(var(--top-h, 48px) + 24px); }
[hidden] { display: none !important; }
html, body { background: var(--page); color: var(--ink); }
body { margin: 0; font: 400 15px/1.7 var(--font); -webkit-font-smoothing: antialiased; word-break: keep-all; overflow-wrap: anywhere; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 41; background: #1b1b1b; }
/* Text links: ink with a yellow underline, ink on hover. */
a { color: var(--ink); text-decoration-line: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 2px; text-underline-offset: 4px; }
a:hover { color: var(--ink); text-decoration-color: var(--ink); }
/* Focus: a yellow ring outside a thin ink one. Yellow alone is 1.5:1 on white, the ink keeps it visible (the cards keep
   their own focus rings). In the ink top bar the yellow ring stands alone. */
:focus-visible:not(.vzb-card, .vzb-card *) { outline: 3px solid var(--yellow); outline-offset: 2px; box-shadow: 0 0 0 2px var(--ink); }
code { font-family: var(--mono); font-size: 0.86em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: 10px; background: var(--ink); color: #ffffff; font-size: 14px; text-decoration: none; }
.skip:focus { top: 12px; color: #ffffff; }
.wrap { box-sizing: border-box; max-width: 1280px; margin: 0 auto; padding-inline: max(40px, env(safe-area-inset-left, 0px)); }
svg.ic { flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Buttons: outline by default, yellow when primary. */
.btn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 14px; border: 1px solid #e3e5ea; border-radius: 10px; background: #ffffff; color: var(--ink); font: 500 14px/1 var(--font); text-decoration: none; white-space: nowrap; cursor: pointer; }
.btn:hover { color: var(--ink); border-color: #cfd2d8; }
.btn.is-primary { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
.btn.is-primary:hover { background: var(--yellow-2); border-color: var(--yellow-2); color: var(--ink); }
.btn.is-lg { height: 48px; padding: 0 22px; border-radius: 12px; font-size: 15px; }
.btn.is-sm { height: 36px; padding: 0 12px; font-size: 13px; }
.btn.is-done { border-color: var(--ink); }
.btn.is-primary.is-done { background: var(--yellow-2); border-color: var(--ink); }

/* Vizney common header: the Vizney blog header (kr.vizney.com · www.vizney.com, Ghost Casper with the Stacked navigation
   and the blog's code injection), which Blocks and Styles copy value for value. Change a value only when the blog changes.
   768px and up: two rows, 80px (globe and search on the left, logo in the middle) and 56px (the menu), each with a 1px rule
   under it; scrolls away with the page. 767px and down: one 64px row and a full-screen menu behind the burger. */
.vz-head { position: relative; z-index: 40; padding: 0 max(4vmin, 20px); background: #1b1b1b; color: #ffffff; font-family: var(--font); font-size: 16px; line-height: 1.3; }
.vz-head::before, .vz-head::after { content: ""; position: absolute; left: 0; width: 100%; height: 1px; background-color: hsla(0, 0%, 100%, 0.15); }
.vz-head::before { top: 80px; }
.vz-head::after { top: 136px; }
.vz-in { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: 80px 56px; column-gap: 40px; align-items: center; max-width: 1200px; margin: 0 auto; }
.vz-head a { color: #ffffff; text-decoration: none; }
.vz-head a:hover { color: #ffffff; }
.vz-tools { grid-row: 1; grid-column: 1; justify-self: start; display: flex; align-items: center; gap: 8px; }
.vz-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; }
.vz-globe { margin-right: -4px; opacity: 0.9; transition: opacity 0.2s ease; }
.vz-globe:hover { opacity: 1; }
.vz-search:hover { opacity: 0.9; }
.vz-logo { grid-row: 1; grid-column: 2; display: block; }
.vz-logo img { display: block; width: auto; height: auto; max-height: 40px; }
.vz-burger { display: none; position: relative; width: 30px; height: 30px; padding: 0; margin-right: -3px; border: 0; background: transparent; cursor: pointer; appearance: none; }
.vz-burger::before, .vz-burger::after { content: ""; position: absolute; left: 3px; width: 24px; height: 1px; background: #ffffff; transition: all 0.2s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s; }
.vz-burger::before { top: 11px; }
.vz-burger::after { bottom: 11px; }
.vz-menu { grid-row: 2; grid-column: 1 / 4; display: flex; align-items: center; justify-content: center; height: 56px; margin: 0 48px; font-weight: 500; }
.vz-nav { display: flex; flex-wrap: nowrap; align-items: center; gap: 32px; margin: 0; padding: 0; list-style: none; }
.vz-nav li { margin: 0; padding: 0; }
.vz-nav a { display: inline-flex; align-items: center; font-size: 16px; font-weight: 500; line-height: 1.7; text-transform: none; white-space: nowrap; }
.vz-nav a:hover { opacity: 0.9; }
.vz-nav a[aria-current] { text-decoration: underline; text-decoration-color: currentColor; text-decoration-thickness: 2px; text-underline-offset: 6px; }
/* Items that do not fit the menu row go into Ghost's "more" dropdown (site.js moves them). */
.vz-more { position: relative; }
.vz-more > button { position: relative; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin: 0 -6px; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; }
.vz-drop { position: absolute; top: 100%; right: -16px; z-index: 90; box-sizing: border-box; width: 200px; margin: 24px 0 0; padding: 12px 0; list-style: none; text-align: left; background: #ffffff; border-radius: 5px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 7px 20px -5px rgba(0, 0, 0, 0.15); opacity: 0; visibility: hidden; transform: translate3d(0, 6px, 0); transition: opacity 0.3s, transform 0.2s; }
.vz-more.is-open .vz-drop { opacity: 1; visibility: visible; transform: translateY(0); }
.vz-head .vz-drop a { display: block; padding: 6px 20px; color: #15171a; line-height: 1.7; }
.vz-head :focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; box-shadow: none; }
.vz-head .vz-drop :focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; box-shadow: none; }

/* Tab row: the line's own navigation under the Vizney header. Sticks to the top while the page scrolls. */
.tabs { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 39; padding: 0 max(4vmin, 20px); background: #ffffff; box-shadow: inset 0 -1px 0 var(--line); }
.tabs-in { box-sizing: border-box; display: flex; align-items: stretch; gap: 24px; max-width: 1200px; height: 48px; margin: 0 auto; overflow-x: auto; scrollbar-width: none; }
.tabs-in::-webkit-scrollbar { display: none; }
.tab { display: inline-flex; align-items: center; gap: 4px; flex: none; font-size: 14px; font-weight: 500; color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.tab:hover { color: var(--ink); }
.tab.is-name { font-size: 15px; font-weight: 700; color: var(--ink); }
.tab[aria-current] { color: var(--ink); box-shadow: inset 0 -2px 0 #1b1b1b; }
.tab.is-git { margin-left: auto; }
.tab:focus-visible { outline-offset: -3px; box-shadow: none; }

/* Card search: the header's magnifier (or ⌘K) opens it. */
.qdlg { box-sizing: border-box; width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 20vh); margin: 10vh auto auto; padding: 8px; border: 0; border-radius: 16px; background: #ffffff; box-shadow: 0 40px 90px -30px rgba(17, 24, 39, 0.5); color: var(--ink); }
.qdlg[open] { display: flex; flex-direction: column; }
.qdlg::backdrop { background: rgba(17, 24, 39, 0.4); }
.search { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 10px 0 14px; color: var(--muted); }
.search input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; font: 400 16px/1 var(--font); color: var(--ink); outline: none; }
.search input:focus-visible { outline: none; box-shadow: none; }
.search input::placeholder { color: var(--muted); }
.search input::-webkit-search-cancel-button { display: none; }
.search kbd { font: 12px/1.4 var(--mono); color: var(--muted); background: #ffffff; border: 1px solid #e3e5ea; border-radius: 6px; padding: 1px 6px; }
.search-pop { flex: 1 1 auto; overflow: auto; margin: 0; padding: 6px 0 0; list-style: none; border-top: 1px solid var(--line-2); }
.search-pop a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 12px; border-radius: 9px; text-decoration: none; color: var(--ink); }
.search-pop a b { font-weight: 500; font-size: 14px; }
.search-pop a span { font-size: 12px; color: var(--muted); text-align: right; }
.search-pop a small { grid-column: 1 / -1; font-size: 12.5px; line-height: 1.5; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-pop [aria-selected="true"] a, .search-pop a:hover { background: var(--soft); }
.search-pop .none { padding: 14px 12px; font-size: 13.5px; color: var(--muted); }

/* Vizney common header, 767px and down: logo, globe, search, burger in one 64px row; the burger opens a full-screen menu. */
@media (max-width: 767px) {
  .vz-head { height: 64px; }
  .vz-head::before, .vz-head::after { display: none; }
  .vz-in { grid-template-columns: 1fr auto auto; grid-template-rows: 64px; column-gap: 0; }
  .vz-logo { grid-column: 1; justify-self: start; }
  .vz-tools { grid-column: 2; gap: 0; }
  .vz-globe { margin-right: 8px; }
  .vz-search { margin: 0 8px 0 -6px; }
  .vz-burger { display: block; grid-row: 1; grid-column: 3; }
  .vz-menu { position: fixed; visibility: hidden; opacity: 0; margin: 0; height: auto; }
  .vz-nav { flex-direction: column; gap: 16px; line-height: 1.4; }
  .vz-nav a { font-size: 26px; font-weight: 600; line-height: 1.7; }
  .vz-nav li { opacity: 0; transform: translateY(-4px); }
  .vz-more { display: none !important; }
  .vz-open .vz-head { position: fixed; inset: 0; z-index: 3999; height: 100%; overflow-y: auto; overscroll-behavior-y: contain; }
  /* The blog keeps a members row (Sign in) at the bottom of its open menu; this site has none, so the same space stays empty
     and the items sit where the blog's do. */
  .vz-open .vz-in { box-sizing: border-box; min-height: 100%; grid-template-rows: 64px 1fr; row-gap: 48px; padding-bottom: calc(48px + max(4vmin, 20px) + max(4vmin, 28px) + 20.8px); }
  .vz-open .vz-menu { position: static; visibility: visible; opacity: 1; grid-row: 2; grid-column: 1 / -1; }
  .vz-open .vz-nav li { opacity: 1; transform: translateY(0); transition: transform 0.2s, opacity 0.2s; }
  .vz-open .vz-burger::before { top: 15px; transform: rotate(45deg); }
  .vz-open .vz-burger::after { bottom: 14px; transform: rotate(-45deg); }
  .tabs-in { gap: 20px; }
}

/* Home: hero */
.hero { padding-top: 72px; }
.eyebrow { margin: 0; display: inline-flex; padding: 6px 12px; border-radius: 999px; background: var(--soft); font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.hero h1 { text-wrap: balance; margin: 20px 0 0; font-size: clamp(36px, 5.2vw, 58px); line-height: 1.16; font-weight: 700; letter-spacing: -0.035em; }
.hero .lede { margin: 20px 0 0; max-width: 640px; font-size: 18px; line-height: 1.7; color: var(--ink-2); }
.cta { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 10px; }
.hint { margin: 16px 0 0; font-size: 14px; color: var(--muted); }
.lost { min-height: 46vh; }
.lost h1 { font-size: clamp(30px, 4vw, 44px); }

/* Home: live dashboard built from cards */
.show-wrap { margin-top: 56px; }
.show { padding: 24px; border-radius: 28px; background: var(--soft); }
.show-hd { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 4px 4px 20px; }
.show-hd p { margin: 0; }
.show-title { font-size: 18px; font-weight: 700; }
.show-sub { margin-top: 2px !important; font-size: 14px; color: var(--muted); }
.show-hd .btn { margin-left: auto; }
.show-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.show-grid > .is-wide { grid-column: span 2; }

/* Sections */
.sec { padding-top: 120px; }
.sec-hd { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 24px; }
.sec-hd > div { flex: 1 1 480px; min-width: 0; }
.sec h2 { margin: 0; font-size: 32px; line-height: 1.25; font-weight: 700; letter-spacing: -0.025em; }
.sec-hd p { margin: 10px 0 0; max-width: 640px; font-size: 16px; color: var(--muted); }
.more { font-size: 15px; font-weight: 500; text-decoration: none; }

/* Chart tiles */
.tiles { margin-top: 28px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.tile { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: #ffffff; color: var(--ink); text-decoration: none; transition: border-color 0.12s, box-shadow 0.12s; }
.tile:hover { border-color: #cfd2d8; box-shadow: 0 10px 24px -16px rgba(17, 24, 39, 0.35); color: var(--ink); }
.tile-art { display: block; border-radius: 10px; background: var(--tile); }
.tile-art svg { display: block; width: 100%; height: 76px; }
.tile-name { display: flex; align-items: baseline; gap: 6px; padding: 0 2px 2px; }
.tile-name b { font-size: 15px; font-weight: 500; }
.tile-name em { font-style: normal; font-size: 13px; color: var(--muted); }
.new { font-size: 11px; font-weight: 700; line-height: 1.5; color: var(--ink); background: var(--yellow); padding: 1px 6px; border-radius: 6px; }
.tile .new { position: absolute; top: -9px; right: 14px; box-shadow: 0 0 0 3px #ffffff; }

/* Purpose index: a box per question, its base card on a soft panel, then each other card after the condition that calls for it. */
.purposes { margin: 28px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 16px; }
.purpose { display: flex; flex-direction: column; min-width: 0; padding: 22px 22px 10px; border: 1px solid var(--line); border-radius: 20px; }
.purpose h3 { margin: 0 2px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-size: 17px; line-height: 1.45; font-weight: 400; }
.purpose h3 b { font-weight: 700; }
.purpose h3 span { font-size: 15px; color: var(--muted); }
.pick-base { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 14px 16px; border-radius: 14px; background: var(--soft); color: var(--ink); text-decoration: none; }
.pick-base:hover { background: #eceef1; color: var(--ink); }
.pick-tag { font-size: 12px; font-weight: 500; line-height: 1.5; color: var(--ink); background: var(--yellow); padding: 1px 7px; border-radius: 6px; }
.pick-base b { font-size: 16px; font-weight: 700; }
.pick-base small { flex: 1 1 100%; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.picks { margin: 6px 0 0; padding: 0; list-style: none; }
.picks li + li { border-top: 1px solid var(--line-2); }
.picks a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 11px 2px; color: var(--ink); text-decoration: none; }
.picks small { flex: 1 1 150px; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.picks b { margin-left: auto; font-size: 13.5px; font-weight: 500; white-space: nowrap; }
.picks a:hover, .picks a:hover small { color: var(--ink); }
.pick-base:hover b, .picks a:hover b { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.pick-base:focus-visible, .picks a:focus-visible { border-radius: 10px; }
#purpose + .cat { margin-top: 120px; }

/* Usage */
.steps { margin: 28px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.step { display: flex; flex-direction: column; gap: 10px; padding: 24px; border: 1px solid var(--line); border-radius: 20px; }
.num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; background: var(--yellow); color: var(--ink); font-size: 14px; font-weight: 700; }
.step h3 { margin: 4px 0 0; font-size: 17px; }
.main .steps { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.step p { margin: 0; font-size: 14px; color: var(--muted); }
.snip { margin: 6px 0 0; padding: 14px; border-radius: 12px; background: var(--tile); font: 12.5px/1.6 var(--mono); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.fields { margin-top: 16px; border: 1px solid var(--line); border-radius: 20px; }
.fields > summary { display: flex; align-items: center; gap: 8px; padding: 18px 24px; list-style: none; font-size: 15px; font-weight: 500; cursor: pointer; border-radius: 20px; }
.fields > summary::-webkit-details-marker { display: none; }
.fields > summary svg { transition: transform 0.15s; }
.fields[open] > summary svg { transform: rotate(180deg); }
.fields-in { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 24px 48px; padding: 4px 24px 24px; }
.fields dl { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 20px; font-size: 14px; line-height: 1.65; }
.fields dd { margin: 0; color: var(--ink-2); }
.fields code { color: var(--ink); background: var(--soft); padding: 1px 5px; border-radius: 5px; }
.fields h3 { margin: 0; font-size: 15px; }
.fields-in p { margin: 8px 0 0; font-size: 14px; color: var(--muted); }
.fields .snip { margin-top: 12px; }

/* Category pages: sidebar and cards */
.doc { display: flex; align-items: flex-start; gap: 40px; padding-top: 36px; }
.side { flex: 0 0 232px; position: sticky; top: calc(var(--top-h, 48px) + 24px); max-height: calc(100vh - var(--top-h, 48px) - 40px); overflow: auto; display: flex; flex-direction: column; gap: 2px; padding-bottom: 16px; }
.side-hd { margin: 0 0 8px; padding: 0 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--muted); }
.side a { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; font-size: 14px; line-height: 1.4; color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.side a:hover { background: var(--soft); color: var(--ink); }
.side a[aria-current], .side a.is-on { background: #f1f2f5; box-shadow: inset 3px 0 0 var(--yellow); color: var(--ink); font-weight: 500; }
.side a em { margin-left: auto; font-style: normal; font-size: 12px; color: var(--muted); }
.side .new { margin-left: 0; }
.side hr { width: calc(100% - 24px); margin: 14px 12px; border: 0; border-top: 1px solid var(--line-2); }
.side .side-link { padding-block: 6px; }
.main { flex: 1 1 auto; min-width: 0; }
.cat + .cat { margin-top: 120px; }
.intro h1 { margin: 18px 0 0; font-size: clamp(30px, 3.6vw, 42px); line-height: 1.2; font-weight: 700; letter-spacing: -0.03em; }
.intro + .cat { margin-top: 96px; }
.crumb { font-size: 13px; color: var(--muted); }
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--ink); }
.crumb i { font-style: normal; margin: 0 8px; }
.cat-title { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.cat-title :is(h1, h2) { margin: 0; font-size: 36px; line-height: 1.2; font-weight: 700; letter-spacing: -0.03em; }
.chip { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 999px; background: var(--soft); font-size: 13px; color: var(--ink-2); }
.cat-lede { margin: 14px 0 0; max-width: 720px; font-size: 16px; line-height: 1.75; color: var(--ink-2); }
.cat-lede code, .item-when code { color: var(--ink); background: var(--soft); padding: 1px 5px; border-radius: 5px; }
.cat-links { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 1px solid #e3e5ea; border-radius: 999px; font-size: 13px; text-decoration: none; color: var(--ink); }
.pill:hover { border-color: #cfd2d8; }
.opt { display: inline-flex; align-items: center; gap: 4px; padding: 3px; border-radius: 999px; background: var(--soft); }
.opt span { padding: 0 8px 0 10px; font-size: 13px; color: var(--muted); }
.opt button { height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; font: 500 13px/1 var(--font); color: var(--ink-2); cursor: pointer; }
.opt button[aria-pressed="true"] { background: #ffffff; color: var(--ink); box-shadow: 0 1px 2px rgba(17, 24, 39, 0.12); }
.grp { margin-top: 48px; display: flex; align-items: baseline; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--line-2); }
.grp + .items { margin-top: 24px; }
.cat-links + .items, .cat-lede + .items { margin-top: 40px; }
.grp :is(h2, h3) { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.015em; }
.grp span { font-size: 14px; color: var(--muted); }
.items { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 44px 24px; }
.items + .grp { margin-top: 64px; }
.item { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.item:target .item-hd :is(h2, h3, h4) { text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.item-hd { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-height: 40px; }
.item-hd :is(h2, h3, h4) { margin: 0; font-size: 16px; font-weight: 700; }
.item-hd code { font-size: 12px; color: var(--muted); }
.acts { margin-left: auto; display: flex; gap: 6px; }
.copy { position: relative; }
.menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: 248px; padding: 6px; border: 1px solid #e3e5ea; border-radius: 12px; background: #ffffff; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 2px; }
.menu[hidden] { display: none; }
.menu button { display: flex; align-items: flex-start; gap: 10px; padding: 10px; border: 0; border-radius: 8px; background: transparent; text-align: left; font: inherit; color: var(--ink); cursor: pointer; }
.menu button:hover, .menu button:focus-visible { background: var(--soft); outline: none; }
.menu button svg { margin-top: 3px; }
.menu b { display: block; font-size: 14px; font-weight: 500; line-height: 1.4; }
.menu small { display: block; font-size: 12px; line-height: 1.4; color: var(--muted); }
.item-when { margin: 0; font-size: 14px; color: var(--ink-2); }
.item-guide { align-self: flex-start; font-size: 13px; color: var(--ink-2); text-decoration: underline; text-decoration-color: #cfd2d8; text-underline-offset: 3px; }
.item-guide:hover { text-decoration-color: currentColor; }
.rules summary { display: inline-flex; align-items: center; gap: 6px; height: 32px; list-style: none; font-size: 13px; font-weight: 500; cursor: pointer; border-radius: 6px; }
.rules summary::-webkit-details-marker { display: none; }
.rules summary svg { transition: transform 0.15s; }
.rules[open] summary svg { transform: rotate(180deg); }
.rules ul { margin: 8px 0 0; padding: 14px 18px 14px 34px; border-radius: 14px; background: var(--tile); display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; line-height: 1.7; color: var(--ink-2); }
.rules li::marker { color: var(--muted); }
.rules code { color: var(--ink); background: #ffffff; padding: 1px 5px; border-radius: 5px; }
.pager { margin-top: 72px; display: flex; flex-wrap: wrap; gap: 16px; }
.pager a { flex: 1 1 240px; display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 16px; text-decoration: none; }
.pager a:hover { border-color: #cfd2d8; }
.pager a.is-next { align-items: flex-end; }
.pager span { font-size: 13px; color: var(--muted); }
.pager b { font-size: 16px; font-weight: 500; }
.pager > span { flex: 1 1 240px; }

/* Footer */
.foot { margin-top: 120px; border-top: 1px solid var(--line-2); }
.foot-in { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; padding-block: 28px 40px; font-size: 13px; color: var(--muted); }
.foot-in nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.foot-in a { color: var(--ink-2); text-decoration-color: currentColor; text-decoration-thickness: auto; text-underline-offset: auto; }

/* Code dialog: line numbers, the data JSON tinted and colored, the rest quiet. */
.dlg { box-sizing: border-box; width: min(960px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 0; border-radius: 18px; box-shadow: 0 40px 90px -30px rgba(17, 24, 39, 0.5); color: var(--ink); }
.dlg[open] { display: flex; flex-direction: column; }
.dlg::backdrop { background: rgba(17, 24, 39, 0.4); }
.dlg-hd { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 20px; padding: 20px 20px 16px 24px; border-bottom: 1px solid var(--line-2); }
.dlg-hd > div:first-child { flex: 1 1 320px; min-width: 0; }
.dlg-hd h2 { margin: 0; font-size: 18px; line-height: 1.4; }
.dlg-hd h2 code { margin-left: 8px; font-size: 13px; font-weight: 400; color: var(--muted); }
.dlg-hd p { margin: 4px 0 0; font-size: 13.5px; color: var(--muted); }
.dlg-hd p b { color: #8a4b00; font-weight: 500; }
.dlg-hd .acts { margin-left: 0; }
.code { position: relative; flex: 1 1 auto; min-height: 0; overflow: auto; margin: 0; padding: 12px 0 20px; background: #fbfbfc; font: 12.5px/1.65 var(--mono); color: #8a9099; outline: none; }
.code .ln { display: block; padding: 0 20px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.code .ln i { display: inline-block; width: 52px; padding-right: 14px; box-sizing: border-box; text-align: right; font-style: normal; color: #b8bcc4; user-select: none; }
.code .ln.is-data { background: var(--data); color: var(--ink); }
.code .ln.is-data i { color: #c9a26b; }
.code .k { color: var(--ink); font-weight: 600; }
.code .s { color: #0b7a4b; }
.code .n { color: #b45309; }
.code .ln.is-head { color: #4a4a4a; }

/* Tablet and phone */
@media (max-width: 1080px) {
  .show-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .doc { display: block; padding-top: 20px; }
  .side { position: static; max-height: none; flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 12px; margin: 0 -16px; padding-inline: 16px; scrollbar-width: none; }
  .side::-webkit-scrollbar { display: none; }
  .side-hd, .side hr, .side .side-link { display: none; }
  .side a { flex: none; border: 1px solid var(--line); border-radius: 999px; padding: 7px 12px; }
  .side a[aria-current], .side a.is-on { background: var(--yellow); border-color: var(--yellow); box-shadow: none; color: var(--ink); }
  .side a[aria-current] em, .side a.is-on em { color: var(--ink-2); }
  .main { padding-top: 16px; }
  .is-one .side { position: sticky; top: var(--top-h, 48px); z-index: 30; padding-top: 10px; padding-bottom: 10px; background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line-2); }
  html:has(.is-one) { scroll-padding-top: calc(var(--top-h, 48px) + 76px); }
  .fields-in { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .wrap { padding-inline: 16px; }
  .hero { padding-top: 44px; }
  .hero .lede { font-size: 16px; }
  .show { padding: 14px; border-radius: 22px; }
  .show-hd { padding: 4px 4px 14px; }
  .show-hd .btn { margin-left: 0; }
  .show-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .show-grid > .is-wide { grid-column: auto; }
  .sec { padding-top: 80px; }
  .sec h2 { font-size: 26px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .purposes { gap: 12px; }
  .purpose { padding: 18px 18px 8px; }
  .cat-title h1, .cat-title h2 { font-size: 30px; }
  .items { grid-template-columns: minmax(0, 1fr); }
  .foot-in nav { margin-left: 0; }
  .fields > summary { padding: 16px 18px; }
  .fields-in { padding: 4px 18px 18px; }
  .fields dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .fields dd { margin-bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) { .tile, .rules summary svg, .fields > summary svg { transition: none; } }