@font-face{font-family:"Archivo";font-style:normal;font-weight:500 800;font-stretch:96%;font-display:swap;src:url(fonts/archivo-500-800-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Archivo";font-style:normal;font-weight:500 800;font-stretch:96%;font-display:swap;src:url(fonts/archivo-500-800-latin.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:"Chivo Mono";font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/chivo-mono-400-600-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Chivo Mono";font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/chivo-mono-400-600-latin.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:"Switzer";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/switzer-400.woff2) format("woff2")}
@font-face{font-family:"Switzer";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/switzer-500.woff2) format("woff2")}
@font-face{font-family:"Switzer";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/switzer-600.woff2) format("woff2")}
@font-face{font-family:"Switzer";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/switzer-700.woff2) format("woff2")}
@font-face{font-family:"Switzer";font-style:normal;font-weight:800;font-display:swap;src:url(fonts/switzer-800.woff2) format("woff2")}
:root {
  --color-paper: #ffffff;
  --color-ink: #000000;
  --color-ink-2: #3c3d40;       
  --color-ink-3: #616366;       
  --color-rule-soft: #cfd1d4;   
  --color-focus: var(--color-ink);
  --c-blue: #0000ff;
  --c-blue-on: #ffffff;
  --c-blue-tint: #c0d5fd;
  --c-blue-band: #c0d5fd;
  --c-red: #ff0000;
  --c-red-on: #000000;
  --c-red-tint: #fdc5bb;
  --c-red-band: #ff0000;
  --c-black: #000000;
  --c-black-on: #ffffff;
  --c-yellow: #ffff00;
  --c-yellow-on: #000000;
  --c-yellow-tint: #fbfdae;
  --c-yellow-band: #ffff00;
  --c-green: #008000;
  --c-green-on: #ffffff;
  --c-green-tint: #bbeab6;
  --c-green-band: #bbeab6;
  --c-orange: #ff6701;
  --c-orange-on: #000000;
  --c-orange-tint: #fed8c9;
  --c-orange-band: #ff6701;
  --type-experiments: var(--c-blue);
  --type-experiments-on: var(--c-blue-on);
  --type-experiments-tint: var(--c-blue-tint);
  --type-experiments-band: var(--c-blue-band);
  --type-opinion: var(--c-red);
  --type-opinion-on: var(--c-red-on);
  --type-opinion-tint: var(--c-red-tint);
  --type-opinion-band: var(--c-red-band);
  --type-notes: var(--c-yellow);
  --type-notes-on: var(--c-yellow-on);
  --type-notes-tint: var(--c-yellow-tint);
  --type-notes-band: var(--c-yellow-band);
  --type-howto: var(--c-green);
  --type-howto-on: var(--c-green-on);
  --type-howto-tint: var(--c-green-tint);
  --type-howto-band: var(--c-green-band);
  --flag-updated: var(--c-orange);
  --flag-dataset: var(--c-black);
  --font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Switzer", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "Chivo Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --wght-head: 750;          
  --wght-title: 700;         
  --track-head: -0.01em;     
  --track-title: -0.005em;
  --track-text: -0.005em;    
  --text-mega: clamp(3.5rem, 11.4vw, 11.5rem);   
  --text-h1: clamp(2.75rem, 7.4vw, 7.25rem);     
  --text-lead: clamp(2.25rem, 5.4vw, 5rem);      
  --text-h2: clamp(1.625rem, 3.1vw, 2.75rem);
  --text-deck: clamp(1.3125rem, 2.25vw, 2.125rem);
  --text-h3: clamp(1.25rem, 1.9vw, 1.75rem);
  --text-body: clamp(1.125rem, 0.35vw + 1rem, 1.25rem);
  --text-sm: 1.0625rem;                          
  --text-ui: 1rem;                               
  --text-fine: 0.875rem;                         
  --text-xs: 0.8125rem;                          
  --text-2xs: 0.75rem;                           
  --text-mark: 1.375rem;                         
  --text-figure: clamp(5.5rem, 15vw, 12.5rem);   
  --text-figure-s: clamp(3.5rem, 6.4vw, 6rem);   
  --text-hero: 27cqi;                            
  --text-hero-wide: 16.5cqi;                     
  --text-table: clamp(0.75rem, 3.5vw, 0.8125rem);      
  --text-table-head: clamp(0.625rem, 3vw, 0.6875rem);  
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --wrap: 84rem;
  --gutter: clamp(var(--space-md), 4.4vw, var(--space-2xl));
  --gap: clamp(var(--space-md), 1.8vw, var(--space-lg));
  --rule: 1px;
  --rule-heavy: 4px;
  --edge: 1.5px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-short: 180ms;
  --dur-long: 420ms;
  --z-raised: 10;
  --z-sticky: 200;
}
.card {
  --text-card-title: clamp(1.5rem, calc(var(--cw) * 0.048), 4.25rem);    
  --text-card-desc: clamp(1.0625rem, calc(var(--cw) * 0.034), 2.125rem); 
  --text-card-tag: clamp(0.8125rem, calc(var(--cw) * 0.025), 1.25rem);   
  --text-card-box: clamp(0.8125rem, calc(var(--cw) * 0.021), 1rem);      
  --card-pad: clamp(var(--space-md), calc(var(--cw) * 0.05), var(--space-xl));        
  --card-foot: clamp(var(--space-xs), calc(var(--cw) * 0.024), var(--space-lg));     
  --card-box-pad: clamp(var(--space-xs), calc(var(--cw) * 0.016), var(--space-md));  
}
[data-type="experiments"] { --type: var(--type-experiments); --on: var(--type-experiments-on); --type-tint: var(--type-experiments-tint); --type-band: var(--type-experiments-band); }
[data-type="opinion"] { --type: var(--type-opinion); --on: var(--type-opinion-on); --type-tint: var(--type-opinion-tint); --type-band: var(--type-opinion-band); }
[data-type="notes"] { --type: var(--type-notes); --on: var(--type-notes-on); --type-tint: var(--type-notes-tint); --type-band: var(--type-notes-band); }
[data-type="howto"] { --type: var(--type-howto); --on: var(--type-howto-on); --type-tint: var(--type-howto-tint); --type-band: var(--type-howto-band); }
[data-flag="updated"] { --flag: var(--flag-updated); }
[data-flag="dataset"] { --flag: var(--flag-dataset); }
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
h1, h2, h3 { min-inline-size: 0; overflow-wrap: anywhere; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration-thickness: 0.07em; text-underline-offset: 0.18em; }
a:active { color: var(--color-ink-2); }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.rail-type a:active, .key a[aria-current]:active { color: var(--on); }
.rail-type a:focus-visible { outline-color: currentColor; }
::selection { background: var(--c-yellow); color: var(--color-ink); }
.wrap { max-inline-size: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; inset-inline-start: var(--gutter); inset-block-start: -4rem; background: var(--color-ink); color: var(--color-paper); padding: var(--space-xs) var(--space-md); z-index: var(--z-sticky); }
.skip:focus { inset-block-start: var(--space-xs); }
.key a[aria-current], .row-meta, .rail-type, .stat-fig, .pull, tr.is-top { color: var(--on); }
mark, .hl { color: var(--color-ink); }
.sw { display: inline-block; flex: none; inline-size: 0.8em; block-size: 0.8em; background: var(--flag); border: var(--edge) solid currentColor; }
.flag { display: inline-flex; align-items: center; gap: var(--space-xs); white-space: nowrap; }
.top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-lg); padding-block: var(--space-lg); }
.mark { font: var(--wght-head) var(--text-mark)/1 var(--font-display); letter-spacing: var(--track-head); text-decoration: none; white-space: nowrap; }
.top-nav { display: flex; gap: clamp(var(--space-md), 2.4vw, var(--space-lg)); font-size: var(--text-ui); font-weight: 500; }
.top-nav a { text-decoration: none; white-space: nowrap; padding-block: var(--space-2xs); }
.top-nav a:hover, .top-nav a[aria-current] { text-decoration: underline; }
.top-nav a:first-child { display: none; }
.hero { padding-block: clamp(var(--space-md), 3vw, var(--space-xl)) clamp(var(--space-xl), 4.5vw, var(--space-2xl)); }
.statement { font: var(--wght-head) var(--text-mega)/0.86 var(--font-display); letter-spacing: var(--track-head); margin-inline-start: -0.04em; }
.hero-row { display: grid; row-gap: var(--space-lg); margin-block-start: clamp(var(--space-lg), 3vw, var(--space-xl)); }
.deck { font: 500 var(--text-deck)/1.16 var(--font-display); letter-spacing: var(--track-text); max-inline-size: 27em; text-wrap: pretty; }
.by { font: 500 var(--text-xs)/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-ink-2); }
.key ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); }
.key li { display: grid; }
.key a, .key-flag { display: grid; grid-template-rows: auto 1fr auto; border: var(--edge) solid var(--color-ink); text-decoration: none; }
.chip-c { block-size: clamp(2.5rem, 4.6vw, 3.75rem); background: var(--type, var(--flag)); border-block-end: var(--edge) solid var(--color-ink); }   
.key-flag .chip-c { background: var(--flag); }
.chip-t { padding: var(--space-xs) var(--space-sm) 0; font-size: var(--text-fine); font-weight: 700; line-height: 1.12; letter-spacing: -0.015em; }
.chip-n { padding: var(--space-2xs) var(--space-sm) var(--space-xs); font: 400 var(--text-2xs)/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-ink-2); }
.key a:hover, .key a:focus-visible { background: var(--type-tint); }
.key a[aria-current] { background: var(--type); }
.key a[aria-current] .chip-n { color: inherit; }
.index { margin-block-start: clamp(var(--space-lg), 2.6vw, var(--space-xl)); padding-block-end: var(--space-3xl); }
.row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); border-block-start: var(--rule) solid var(--color-ink); }
.row-meta, .rail-type { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-md); padding: var(--space-xs) var(--space-sm); background: var(--type); font: 500 var(--text-xs)/1.25 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; }
.row-meta { grid-column: 1 / -1; }
.kind { font-weight: 600; white-space: nowrap; }
.row-meta time { white-space: nowrap; }
.row-stat { display: none; }
.row-main { grid-column: 1 / -1; min-inline-size: 0; padding-block: var(--space-md) var(--space-lg); }
.row-title { font: var(--wght-title) var(--text-h2)/1.03 var(--font-display); letter-spacing: var(--track-title); text-wrap: balance; }
.row-title a { text-decoration: none; background: linear-gradient(transparent 38%, var(--type-band) 38%, var(--type-band) 92%, transparent 92%) no-repeat 0 0 / 0 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.row-title a:hover, .row-title a:focus-visible { background-size: 100% 100%; }
.row-desc { margin-block-start: var(--space-sm); font-size: var(--text-sm); line-height: 1.5; color: var(--color-ink-2); max-inline-size: 62ch; }
.row-lead .row-main { padding-block: var(--space-lg) clamp(var(--space-lg), 4vw, var(--space-xl)); }
.row-lead .row-title { font-size: var(--text-lead); font-weight: var(--wght-head); line-height: 0.95; letter-spacing: var(--track-head); }
.row-lead .row-desc { margin-block-start: var(--space-md); font-size: var(--text-h3); line-height: 1.32; letter-spacing: -0.012em; color: var(--color-ink); max-inline-size: 44ch; }
.row-note .row-main { padding-block: var(--space-md); }
.row-note .row-title { font-size: var(--text-h3); font-weight: 600; line-height: 1.16; letter-spacing: var(--track-title); }
.row-note .row-desc { margin-block-start: var(--space-2xs); }
.page-head { padding-block: clamp(var(--space-md), 2.2vw, var(--space-lg)) clamp(var(--space-lg), 3.8vw, var(--space-xl)); }
.page-title { font: var(--wght-head) var(--text-h1)/0.9 var(--font-display); letter-spacing: var(--track-head); margin-inline-start: -0.04em; text-wrap: balance; }
.page-head .deck { margin-block-start: clamp(var(--space-md), 2.5vw, var(--space-lg)); }
.foot { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--space-xl); padding-block: 0 var(--space-lg); background: linear-gradient(var(--color-ink), var(--color-ink)) 0 0 / 100% var(--rule-heavy) no-repeat; background-origin: content-box; background-clip: content-box; }
.foot-mark { grid-column: 1 / -1; font: var(--wght-head) var(--text-h1)/0.86 var(--font-display); letter-spacing: var(--track-head); padding-block-start: var(--space-xl); }
.foot-links { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xs) var(--space-lg); align-content: start; font-weight: 500; font-size: var(--text-sm); }
.foot-links a { text-decoration: none; white-space: nowrap; }
.foot-links a:hover { text-decoration: underline; }
.strip { grid-column: 1 / -1; display: flex; align-items: center; }
.strip i { flex: 1; block-size: clamp(1.75rem, 3.4vw, 2.75rem); background: var(--type); border: var(--edge) solid var(--color-ink); margin-inline-start: calc(var(--edge) * -1); }
.strip .reg { flex: none; margin-inline-end: var(--space-md); }
.strip i ~ .reg { margin-inline: var(--space-md) 0; }
.foot-slug { grid-column: 1 / -1; padding-block-start: var(--space-md); border-block-start: var(--rule) solid var(--color-ink); }
.colophon { font: 400 var(--text-xs)/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-ink-2); }
.progress { position: fixed; inset: 0 0 auto 0; block-size: var(--space-2xs); background: var(--type); transform: scaleX(0); transform-origin: 0 50%; z-index: var(--z-sticky); pointer-events: none; }
.post-head { padding-block: clamp(var(--space-md), 2.2vw, var(--space-lg)) clamp(var(--space-lg), 3.8vw, var(--space-xl)); }
.post-title { font: var(--wght-head) var(--text-h1)/0.9 var(--font-display); letter-spacing: var(--track-head); margin-inline-start: -0.04em; max-inline-size: 11.5em; text-wrap: balance; }
.post-note .post-title { font-size: var(--text-lead); line-height: 0.96; letter-spacing: var(--track-head); max-inline-size: 16em; }
.post-head .deck { margin-block-start: clamp(var(--space-md), 2.5vw, var(--space-lg)); max-inline-size: 25em; }
.post-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); border-block-start: var(--rule-heavy) solid var(--color-ink); padding-block-start: var(--space-lg); }
.rail { grid-column: 1 / -1; margin-block-end: var(--space-lg); font: 400 var(--text-xs)/1.4 var(--font-mono); }
.rail-type a { font-weight: 600; text-decoration: none; white-space: nowrap; }
.rail-type a:hover, .rail-type a:focus-visible { text-decoration: underline; }
.rail dl { margin-block-start: var(--space-xs); }
.rail div { padding-block: var(--space-xs); border-block-end: var(--rule) solid var(--color-rule-soft); }
.rail dt { text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-ink-3); }
.rail dd { font-size: var(--text-fine); margin-block-start: var(--space-3xs); }
.post-body { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 40rem) minmax(0, 1fr); align-content: start; min-inline-size: 0; }
.post-body > * { grid-column: 1; min-inline-size: 0; }
.post-body > .stat, .post-body > .tbl, .post-body > .chart, .post-body > .pull { grid-column: 1 / -1; }
.post-body p { margin-block-end: var(--space-lg); text-wrap: pretty; }
.post-body .lead { font-size: var(--text-h3); line-height: 1.34; letter-spacing: -0.016em; font-weight: 500; }
.post-body h2 { font: var(--wght-head) var(--text-h2)/1 var(--font-display); letter-spacing: var(--track-head); margin-block: var(--space-2xl) var(--space-md); text-wrap: balance; }
.post-body h2::before { content: ""; display: inline-block; inline-size: 0.5em; block-size: 0.5em; margin-inline-end: var(--space-sm); background: var(--type); border: var(--edge) solid var(--color-ink); }
.post-body h3 { font: var(--wght-title) var(--text-h3)/1.12 var(--font-display); letter-spacing: var(--track-title); margin-block: var(--space-xl) var(--space-xs); text-wrap: balance; }
.post-body a, .rail dd a { text-decoration-thickness: 0.08em; }
.post-body a:hover, .post-body a:focus-visible, .rail dd a:hover, .rail dd a:focus-visible { background: var(--type-band); }
mark { background: var(--type-tint); padding-inline: var(--space-2xs); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.stat { display: grid; align-items: stretch; margin-block: var(--space-md) var(--space-xl); }
.post-body .stat-fig { margin: 0; padding: var(--space-md) var(--space-lg); background: var(--type); border: var(--edge) solid var(--color-ink); font: var(--wght-head) var(--text-figure)/0.78 var(--font-display); letter-spacing: var(--track-head); white-space: nowrap; }
.stat-of { font-size: 0.24em; letter-spacing: var(--track-title); font-weight: var(--wght-title); }
.post-body .stat-t { display: flex; align-items: flex-end; margin: calc(var(--edge) * -1) 0 0; padding: var(--space-md) var(--space-lg); border: var(--edge) solid var(--color-ink); font: 500 var(--text-deck)/1.14 var(--font-display); letter-spacing: var(--track-text); }
.tbl { margin-block: var(--space-xl); }
.tbl-scroll { overflow-x: auto; }
table { inline-size: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: var(--text-table); }
thead th { font: 600 var(--text-table-head)/1.2 var(--font-body); text-align: start; vertical-align: bottom; padding: var(--space-xs) var(--space-2xs); border-block-end: 2px solid var(--color-ink); color: var(--color-ink-2); }
tbody th { text-align: start; font-weight: 700; }
tbody th, tbody td { padding: var(--space-sm) var(--space-2xs); border-block-end: var(--rule) solid var(--color-rule-soft); }
.num, thead th.num { text-align: end; }
tr.is-top th, tr.is-top td { background: var(--type); }
figcaption { font-size: var(--text-fine); line-height: 1.45; color: var(--color-ink-2); margin-block-start: var(--space-sm); max-inline-size: 68ch; }
.chart { margin-block: var(--space-xl); --label: 6rem; }
.chart figcaption { font: 700 var(--text-sm)/1.3 var(--font-body); color: var(--color-ink); margin-block: 0 var(--space-md); letter-spacing: -0.01em; }
.bars { display: grid; row-gap: var(--space-xs); }
.bar { position: relative; display: grid; grid-template-columns: var(--label) minmax(0, 1fr); column-gap: var(--space-md); align-items: center; }
.bar-l { font-size: var(--text-fine); font-weight: 500; line-height: 1.15; }
.bar-track { display: flex; align-items: center; gap: var(--space-xs); }
.bar-fill { flex: none; block-size: 1.25rem; inline-size: calc((100% - var(--val, 3rem)) * var(--v) / 100); background: var(--type); box-shadow: inset 0 0 0 var(--edge) var(--color-ink); }   
.bar.is-top .bar-fill { background: var(--color-ink); }
.bar.is-top .bar-l { font-weight: 800; }
.bar-v { font: 600 var(--text-fine)/1 var(--font-mono); }
.bar-d { position: absolute; inset-inline-start: 0; inset-block-start: calc(100% + var(--space-3xs)); z-index: var(--z-raised); background: var(--color-ink); color: var(--color-paper); padding: var(--space-2xs) var(--space-xs); font-size: var(--text-xs); line-height: 1.3; opacity: 0; pointer-events: none; }
.bar:hover .bar-d, .bar:focus-visible .bar-d { opacity: 1; }
.post-body .chart-axis { display: flex; justify-content: space-between; margin: var(--space-xs) var(--val, 3rem) 0 calc(var(--label) + var(--space-md)); padding-block-start: var(--space-2xs); border-block-start: var(--rule) solid var(--color-rule-soft); font: 400 var(--text-2xs)/1 var(--font-mono); color: var(--color-ink-3); }
.pull { margin-block: var(--space-xl); padding: clamp(var(--space-lg), 3vw, var(--space-xl)) clamp(var(--space-md), 2.6vw, var(--space-xl)); background: var(--type); border: var(--edge) solid var(--color-ink); }
.post-body .pull p { margin: 0; font: var(--wght-head) var(--text-lead)/1 var(--font-display); letter-spacing: var(--track-head); max-inline-size: 13em; text-wrap: balance; }
.hl { background: var(--color-paper); padding-inline: var(--space-2xs); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.method { margin-block: var(--space-md) var(--space-xl); border-block-start: var(--rule) solid var(--color-ink); }
.method div { display: grid; row-gap: var(--space-2xs); column-gap: var(--space-md); padding-block: var(--space-sm); border-block-end: var(--rule) solid var(--color-rule-soft); }
.method dt { font: 500 var(--text-xs)/1.5 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; padding-block-start: var(--space-3xs); }
.method dd { font-size: var(--text-sm); line-height: 1.5; }
.post-body .caveat { margin: 0; padding: var(--space-md) var(--space-lg); border: var(--edge) solid var(--color-ink); font-size: var(--text-sm); line-height: 1.5; }
.post-body .from { margin: var(--space-lg) 0 0; padding: var(--space-md) var(--space-lg); border: var(--edge) solid var(--color-ink); font-size: var(--text-sm); line-height: 1.4; }
.from span { display: block; margin-block-end: var(--space-2xs); font: 500 var(--text-xs)/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-ink-2); }
.from a { font-weight: 700; }
.more { margin-block-start: var(--space-3xl); padding-block-end: var(--space-3xl); }
.more-h { font: var(--wght-head) var(--text-h2)/1 var(--font-display); letter-spacing: var(--track-head); padding-block-end: var(--space-md); border-block-end: var(--rule-heavy) solid var(--color-ink); }
.more .row:first-of-type { border-block-start: 0; }
@media (prefers-reduced-motion: no-preference) {
  .chip-c { transform-origin: 0 50%; animation: ink var(--dur-long) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 40ms); }
  .key li:nth-child(2) { --i: 1; }
  .key li:nth-child(3) { --i: 2; }
  .key li:nth-child(4) { --i: 3; }
  .key li:nth-child(5) { --i: 4; }
  .key li:nth-child(6) { --i: 5; }
  @keyframes ink { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  .row-title a { transition: background-size var(--dur-short) var(--ease-out); }
  @supports (animation-timeline: scroll()) {
    .progress { animation: read linear both; animation-timeline: scroll(root block); }
    @keyframes read { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  }
}
@media (min-width: 40rem) {
  .top-nav a:first-child { display: inline; }
  .key ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rail dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); }
  .stat { grid-template-columns: auto minmax(0, 1fr); }
  .post-body .stat-t { margin: 0 0 0 calc(var(--edge) * -1); }
  .chart { --label: 11rem; }
  .bar-l { font-size: var(--text-ui); }
  .bar-d { inset-inline-start: calc(var(--label) + var(--space-md)); white-space: nowrap; }
  table { font-size: var(--text-sm); }
  thead th { font: 500 var(--text-xs)/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; padding-inline: var(--space-sm); }
  tbody th, tbody td { padding-inline: var(--space-sm); }
  .method div { grid-template-columns: 7rem minmax(0, 1fr); }
  .foot-links { grid-template-columns: repeat(4, max-content); }
}
@media (min-width: 60rem) {
  .hero-row { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
  .hero .deck { grid-column: 1 / span 9; }
  .by { grid-column: 10 / -1; justify-self: end; text-align: end; }
  .row-main { grid-column: 1 / span 9; grid-row: 1; padding-block: var(--space-lg); }
  .row-meta, .rail-type { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: var(--space-xs); padding: var(--space-md); }
  .row-meta { grid-column: 10 / -1; grid-row: 1; }
  .row-lead .row-main { padding-block: clamp(var(--space-lg), 3.5vw, var(--space-xl)); }
  .row-note .row-main { padding-block: var(--space-md); }
  .row-stat { display: grid; margin-block-start: auto; padding-block-start: var(--space-lg); text-transform: none; letter-spacing: 0; }
  .row-stat b { font: var(--wght-head) var(--text-figure-s)/0.8 var(--font-display); letter-spacing: var(--track-head); }
  .row-stat span { margin-block-start: var(--space-xs); font: 500 var(--text-fine)/1.25 var(--font-body); }
  .post-body { grid-column: 1 / span 9; grid-row: 1; }
  .rail { grid-column: 10 / -1; grid-row: 1; position: sticky; inset-block-start: var(--space-lg); align-self: start; margin-block-end: 0; }
  .rail dl { display: block; }
  .foot-mark { grid-column: 1 / span 8; }
  .foot-links { grid-column: 10 / -1; grid-template-columns: minmax(0, 1fr); padding-block-start: var(--space-xl); }
}
@media (min-width: 68rem) {
  .key ul { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (min-width: 75rem) {
  .row-main { grid-column: 1 / span 10; }
  .row-meta { grid-column: 11 / -1; }
}
@media (pointer: coarse) {
  .top-nav a, .foot-links a, .rail a, .from a { padding-block: var(--space-sm); }
}
.cards { --cw: calc(min(100vw, var(--wrap)) - 2 * var(--gutter)); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
.cards:not(.cards-3) { margin-block-start: clamp(var(--space-lg), 2.6vw, var(--space-xl)); padding-block-end: var(--space-3xl); }
.card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  border: var(--edge) solid var(--color-ink);
  background: var(--type);
  color: var(--on);
}
@supports (grid-template-rows: subgrid) {
  .card { grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
}
.card-top { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; row-gap: var(--space-sm); padding: var(--card-pad) var(--card-pad) calc(var(--card-pad) * 0.8); background: var(--color-paper); color: var(--color-ink); border-block-end: var(--edge) solid var(--color-ink); }
.card-title { font: var(--wght-title) var(--text-card-title)/1.02 var(--font-display); letter-spacing: var(--track-title); text-wrap: balance; }
.card-title a { text-decoration: none; background: linear-gradient(transparent 38%, var(--type-band) 38%, var(--type-band) 92%, transparent 92%) no-repeat 0 0 / 0 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.card-title a::after { content: ""; position: absolute; inset: calc(var(--edge) * -1); }   
.card-title a:hover, .card-title a:focus-visible { background-size: 100% 100%; }
.card-title a:focus-visible { outline: 0; }
.card-title a:focus-visible::after { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.card-tag { display: grid; align-content: start; font: 700 var(--text-card-tag)/1.2 var(--font-body); letter-spacing: -0.01em; }
.card-desc { padding: calc(var(--card-pad) * 1.4) var(--card-pad) 0; font: 600 var(--text-card-desc)/1.18 var(--font-display); letter-spacing: var(--track-text); max-inline-size: 40em; text-wrap: pretty; }
.card-boxes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-self: end; margin: calc(var(--card-pad) * 1.6) var(--card-pad) var(--card-foot); border: var(--rule) solid currentColor; }
.card-boxes > div { padding: var(--card-box-pad); min-inline-size: 0; }
.card-boxes > div:nth-child(even) { border-inline-start: var(--rule) solid currentColor; }
.card-boxes > div:nth-child(n+3) { border-block-start: var(--rule) solid currentColor; }
.card-boxes dt { font: 600 var(--text-2xs)/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; }
.card-boxes dd { margin-block-start: var(--space-3xs); font: 600 var(--text-card-box)/1.3 var(--font-body); letter-spacing: -0.005em; }
.card-boxes .flag { gap: var(--space-xs); }
@media (prefers-reduced-motion: no-preference) {
  .card-title a { transition: background-size var(--dur-short) var(--ease-out); }
}
@media (min-width: 33rem) {
  .card-top { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .card-title { grid-column: 1 / span 3; padding-inline-end: var(--space-md); }
  .card-tag { grid-column: 4; padding-inline-start: calc(var(--card-box-pad) + var(--rule)); }
  .card-boxes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .card-boxes > div:nth-child(n) { border-block-start: 0; border-inline-start: var(--rule) solid currentColor; }
  .card-boxes > div:first-child { border-inline-start: 0; }
}
@media (min-width: 68rem) {
  .cards { --cw: calc((min(100vw, var(--wrap)) - 2 * var(--gutter) - var(--gap)) / 2); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards .card-lead { --cw: calc(min(100vw, var(--wrap)) - 2 * var(--gutter)); grid-column: 1 / -1; }
  .cards-3 { --cw: calc((min(100vw, var(--wrap)) - 2 * var(--gutter) - 2 * var(--gap)) / 3); grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cards-3 .card-top { grid-template-columns: minmax(0, 1fr); }
  .cards-3 .card-title, .cards-3 .card-tag { grid-column: auto; padding-inline: 0; }
  .cards-3 .card-boxes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards-3 .card-boxes > div:nth-child(n) { border-inline-start: 0; }
  .cards-3 .card-boxes > div:nth-child(even) { border-inline-start: var(--rule) solid currentColor; }
  .cards-3 .card-boxes > div:nth-child(n+3) { border-block-start: var(--rule) solid currentColor; }
}
.more .cards { margin-block-start: var(--space-lg); }
:root {
  --m-len: var(--space-xs);                         
  --m-gap: var(--space-2xs);                        
  --m-off: calc(var(--m-len) + var(--m-gap));
  --m-reg: var(--space-lg);                         
  --mark-reg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='6.5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M12 1v22M1 12h22' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
}
@media (min-width: 40rem) {
  :root { --m-len: var(--space-sm); --m-gap: var(--space-xs); }   
}
.sheet { position: relative; block-size: var(--space-xl); color: var(--color-ink); }
.crop { position: absolute; inset-block-start: 0; inline-size: var(--m-off); block-size: var(--m-off); background: linear-gradient(currentColor, currentColor) no-repeat, linear-gradient(currentColor, currentColor) no-repeat; background-size: var(--rule) var(--m-len), var(--m-len) var(--rule); }
.crop-bl { inset-inline-start: calc(var(--gutter) - var(--m-off)); background-position: 100% 100%, 0 0; }
.crop-br { inset-inline-end: calc(var(--gutter) - var(--m-off)); background-position: 0 100%, 100% 0; }
.mk-reg { position: absolute; inset-block-start: var(--space-xs); inset-inline-start: calc(50% - var(--m-reg) / 2); inline-size: var(--m-reg); block-size: var(--m-reg); background: var(--mark-reg) center / contain no-repeat; }
.strip i[data-k] { position: relative; }
.strip i[data-k]::after { content: attr(data-k); position: absolute; inset-block-start: calc(100% + var(--space-xs)); inset-inline-start: 0; font: 500 var(--text-2xs)/1 var(--font-mono); font-style: normal; color: var(--color-ink-2); }
.lg-t a, .sc-t a, .ta-post a { text-decoration: none; background: linear-gradient(transparent 38%, var(--type-band) 38%, var(--type-band) 92%, transparent 92%) no-repeat 0 0 / 0 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.lg-t a:hover, .lg-t a:focus-visible, .sc-t a:hover, .sc-t a:focus-visible, .ta-post a:hover, .ta-post a:focus-visible, .ta tr:hover .ta-post a { background-size: 100% 100%; }
@media (prefers-reduced-motion: no-preference) {
  .lg-t a, .sc-t a, .ta-post a { transition: background-size var(--dur-short) var(--ease-out); }
}
.ledger { margin-block-start: clamp(var(--space-xl), 4vw, var(--space-2xl)); padding-block-end: var(--space-3xl); }
.lg-month + .lg-month { margin-block-start: clamp(var(--space-xl), 4vw, var(--space-2xl)); }
.lg-head { position: sticky; inset-block-start: 0; z-index: var(--z-raised); display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-sm) var(--space-xs); background: var(--color-paper); border-block-end: var(--rule-heavy) solid var(--color-ink); }
.lg-h { font: var(--wght-head) var(--text-h2)/0.95 var(--font-display); letter-spacing: var(--track-head); }
.lg-n { font: 500 var(--text-xs)/1.25 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-ink-2); white-space: nowrap; }
.lg-row { display: grid; grid-template-columns: minmax(0, 1fr); border-block-start: var(--rule) solid var(--color-ink); }
.lg-row:first-child { border-block-start: 0; }
.lg-day { display: none; }
.lg-meta { order: -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-md); padding: var(--space-xs) var(--space-sm); background: var(--type); color: var(--on); font: 500 var(--text-xs)/1.25 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; }
.lg-meta time { white-space: nowrap; }
.lg-t { padding-block: var(--space-sm) var(--space-md); font: var(--wght-title) var(--text-h3)/1.14 var(--font-display); letter-spacing: var(--track-title); text-wrap: balance; }
.sections { margin-block-start: clamp(var(--space-xl), 4vw, var(--space-2xl)); padding-block-end: var(--space-3xl); }
.sc { scroll-margin-block-start: var(--space-lg); }
.sc + .sc { margin-block-start: var(--space-3xl); }
.sc-head { display: flex; flex-direction: column; padding: var(--space-lg) var(--space-md) var(--space-md); background: var(--type); color: var(--on); border: var(--edge) solid var(--color-ink); }
.sc-h { font: var(--wght-head) var(--text-lead)/0.92 var(--font-display); letter-spacing: var(--track-head); text-wrap: balance; }
.sc-line { margin-block-start: var(--space-md); font: 500 var(--text-body)/1.3 var(--font-display); letter-spacing: var(--track-text); max-inline-size: 22em; text-wrap: balance; }
.sc-n { margin-block-start: var(--space-lg); font: 500 var(--text-xs)/1.25 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; }
.sc-list { margin-block-start: var(--space-xs); }
.sc-row { display: grid; row-gap: var(--space-2xs); padding-block: var(--space-sm) var(--space-md); border-block-end: var(--rule) solid var(--color-ink); }
.sc-t { font: var(--wght-title) var(--text-h3)/1.14 var(--font-display); letter-spacing: var(--track-title); text-wrap: balance; }
.sc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-md); font: 500 var(--text-xs)/1.25 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-ink-2); }
.sc-meta time { white-space: nowrap; }
.sc-meta .flag { color: var(--color-ink); }
.cbar { margin-block-start: clamp(var(--space-xl), 4vw, var(--space-2xl)); }
.cb-months { display: grid; row-gap: var(--space-xs); }
.cb-month { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--space-2xs); }
.cb-label { justify-self: start; font: 500 var(--text-xs)/1.25 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none; white-space: nowrap; }
.cb-label:hover, .cb-label:focus-visible { text-decoration: underline; }
.cb-row { display: flex; flex-wrap: wrap; padding-inline-start: var(--edge); row-gap: var(--space-2xs); }
.cb-row li { display: flex; margin-inline-start: calc(var(--edge) * -1); }
.cb-sq { --sq: clamp(1.75rem, 2.8vw, 2.5rem); position: relative; display: flex; align-items: flex-end; inline-size: var(--sq); block-size: var(--sq); padding: var(--space-3xs) var(--space-2xs); background: var(--type); color: var(--on); border: var(--edge) solid var(--color-ink); font: 500 var(--text-2xs)/1 var(--font-mono); text-decoration: none; }
.cb-sq:hover, .cb-sq:focus-visible { z-index: var(--z-raised); outline: 3px solid var(--color-ink); outline-offset: 2px; }
.cb-sq span { font-variant-numeric: tabular-nums; }
.cb-f { position: absolute; inset-block-start: var(--space-3xs); inset-inline-end: var(--space-3xs); inline-size: var(--space-xs); block-size: var(--space-xs); background: var(--flag); border: 1px solid var(--on); }
.cb-f + .cb-f { inset-inline-end: calc(var(--space-3xs) + var(--space-xs) + var(--space-3xs)); }
.cb-read { display: none; }
.cb-list { margin-block-start: clamp(var(--space-xl), 4vw, var(--space-2xl)); }
.cb-group + .cb-group { margin-block-start: clamp(var(--space-xl), 4vw, var(--space-2xl)); }
.cb-group { scroll-margin-block-start: var(--space-lg); }
.cb-gh { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); padding-block-end: var(--space-sm); border-block-end: var(--rule-heavy) solid var(--color-ink); font: var(--wght-head) var(--text-h2)/0.95 var(--font-display); letter-spacing: var(--track-head); }
.cb-gh span { font: 500 var(--text-xs)/1.25 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-ink-2); white-space: nowrap; }
.cb-group > .row:first-of-type { border-block-start: 0; }
.key button { all: unset; box-sizing: border-box; display: grid; grid-template-rows: auto 1fr auto; inline-size: 100%; border: var(--edge) solid var(--color-ink); cursor: pointer; }
.key button:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.key button[data-type]:hover { background: var(--type-tint); }
.key button[data-flag]:hover .chip-t { text-decoration: underline; }
.key button[data-flag="dataset"] { --on: var(--c-black-on); }
.key button[data-flag="updated"] { --on: var(--c-orange-on); }
.key button[aria-pressed="true"] { background: var(--type, var(--flag)); color: var(--on); }
.key button[aria-pressed="true"] .chip-n { color: inherit; }
.ta-wrap { margin-block-start: clamp(var(--space-lg), 2.6vw, var(--space-xl)); padding-block-end: var(--space-3xl); }
.ta-status { padding-block-end: var(--space-sm); font: 500 var(--text-xs)/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-ink-2); }
.ta, .ta tbody { display: block; }
.ta { border-block-start: var(--rule-heavy) solid var(--color-ink); }
.ta thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ta tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "cat date" "post post" "num data"; column-gap: var(--space-md); row-gap: var(--space-xs); padding-block: var(--space-md); border-block-end: var(--rule) solid var(--color-ink); }
.ta tbody tr[hidden] { display: none; }
.ta tbody th, .ta tbody td { padding: 0; border: 0; }
.ta tbody .ta-cat { grid-area: cat; display: flex; align-items: center; font-size: var(--text-fine); font-weight: 600; line-height: 1.2; }
.ta-sq { flex: none; inline-size: var(--space-md); block-size: var(--space-md); margin-inline-end: var(--space-xs); background: var(--type); border: var(--edge) solid var(--color-ink); }
.ta tbody .ta-date { grid-area: date; display: grid; justify-items: end; row-gap: var(--space-2xs); font: 500 var(--text-xs)/1.25 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; }
.ta tbody .ta-date time { white-space: nowrap; }
.ta tbody .ta-post { grid-area: post; font: var(--wght-title) var(--text-body)/1.25 var(--font-display); letter-spacing: var(--track-title); text-wrap: balance; }
.ta tbody .ta-num { grid-area: num; display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2xs) var(--space-xs); }
.ta tbody .ta-num b { font: var(--wght-head) var(--text-h3)/1 var(--font-display); letter-spacing: var(--track-head); white-space: nowrap; }
.ta tbody .ta-num span { font-size: var(--text-fine); line-height: 1.3; color: var(--color-ink-2); }
.ta tbody .ta-data { grid-area: data; align-self: end; }
.ta tbody .ta-num:empty, .ta tbody .ta-data:empty { display: none; }
.ta-csv { display: inline-flex; align-items: center; gap: var(--space-xs); font: 600 var(--text-xs)/1.25 var(--font-mono); letter-spacing: 0.06em; white-space: nowrap; }
.ta-csv:hover, .ta-csv:focus-visible { background: var(--c-yellow); }
@media (min-width: 60rem) {
  .lg-month { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); border-block-start: var(--rule-heavy) solid var(--color-ink); }
  .lg-head { grid-column: 1 / span 3; align-self: start; display: block; inset-block-start: var(--space-lg); padding-block: var(--space-md) 0; background: none; border: 0; }
  .lg-h span { display: block; }   
  .lg-n { margin-block-start: var(--space-xs); }
  .lg-list { grid-column: 4 / -1; display: grid; grid-template-columns: subgrid; }
  .lg-row { grid-column: 1 / -1; grid-template-columns: subgrid; }
  .lg-day { display: block; grid-column: 1; padding-block: var(--space-sm); font: 500 var(--text-h3)/1.14 var(--font-mono); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
  .lg-t { grid-column: 2 / span 5; }
  .lg-meta { order: 0; grid-column: 7 / -1; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: var(--space-2xs); padding: var(--space-sm) var(--space-md); }
  .lg-date { display: none; }
  .sc { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
  .sc-head { grid-column: 1 / span 4; position: sticky; inset-block-start: var(--space-lg); min-block-size: 20rem; padding: var(--space-lg); }
  .sc-n { margin-block-start: auto; padding-block-start: var(--space-xl); }
  .sc-list { grid-column: 5 / -1; margin-block-start: 0; border-block-start: var(--rule-heavy) solid var(--color-ink); }
  .sc-row { grid-template-columns: minmax(0, 1fr) 9.5rem; column-gap: var(--gap); align-items: baseline; }
  .sc-meta { flex-direction: column; align-items: flex-end; gap: var(--space-2xs); text-align: end; }
  .cb-month { grid-template-columns: 5.5rem minmax(0, 1fr); column-gap: var(--space-sm); align-items: center; }
  .ta { display: table; border-block-start: 0; }
  .ta tbody { display: table-row-group; }
  .ta thead { position: static; inline-size: auto; block-size: auto; overflow: visible; clip-path: none; white-space: normal; }
  .ta thead th { padding: var(--space-xs) var(--space-sm); border-block-end: var(--rule-heavy) solid var(--color-ink); text-align: start; vertical-align: bottom; }
  .ta thead th.ta-num, .ta tbody td.ta-num { text-align: start; }
  .ta thead button { all: unset; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
  .ta thead button:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
  .ta thead th[aria-sort="descending"] button::after { content: " \2193"; }
  .ta thead th[aria-sort="ascending"] button::after { content: " \2191"; }
  .ta tbody tr { display: table-row; padding: 0; border: 0; }
  .ta tbody tr[hidden] { display: none; }
  .ta tbody th, .ta tbody td { display: table-cell; padding: var(--space-sm); border-block-end: var(--rule) solid var(--color-ink); vertical-align: top; }
  .ta thead .ta-date { inline-size: 9.5rem; }
  .ta tbody .ta-date { display: table-cell; }
  .ta tbody .ta-date .flag { display: flex; margin-block-start: var(--space-2xs); }
  .ta thead .ta-cat { inline-size: 10.5rem; }
  .ta tbody .ta-cat { display: table-cell; white-space: nowrap; }
  .ta tbody .ta-cat .ta-sq { display: inline-block; vertical-align: -0.15em; }
  .ta thead .ta-num { inline-size: 14rem; }
  .ta tbody .ta-num { display: table-cell; }
  .ta tbody .ta-num b { display: block; }
  .ta tbody .ta-num span { display: block; margin-block-start: var(--space-2xs); }
  .ta thead .ta-data { inline-size: 6rem; }
  .ta tbody .ta-num:empty, .ta tbody .ta-data:empty { display: table-cell; }
}
@media (min-width: 60rem) and (hover: hover) {
  .cbar { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
  .cb-months { grid-column: 1 / span 7; grid-row: 1; }
  .cb-read { grid-column: 8 / -1; grid-row: 1; position: sticky; inset-block-start: var(--space-lg); display: block; padding-block-start: var(--space-md); border-block-start: var(--rule-heavy) solid var(--color-ink); }
  .cb-read-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-md); padding: var(--space-xs) var(--space-sm); background: var(--type); color: var(--on); font: 500 var(--text-xs)/1.25 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; }
  .cb-read-meta .kind { font-weight: 600; }
  .cb-read-t { margin-block-start: var(--space-md); font: var(--wght-title) var(--text-h2)/1.03 var(--font-display); letter-spacing: var(--track-title); text-wrap: balance; }
  .cb-read-x { margin-block-start: var(--space-sm); font-size: var(--text-sm); line-height: 1.5; color: var(--color-ink-2); max-inline-size: 40ch; }
  .cb-read-hint { margin-block-start: var(--space-lg); font: 500 var(--text-xs)/1.25 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-ink-3); }
  .cb-read.is-live .cb-read-hint { visibility: hidden; }
}
@media (min-width: 75rem) {
  .lg-t { grid-column: 2 / span 6; }
  .lg-meta { grid-column: 8 / -1; }
}
.hx { container-type: inline-size; padding-block: clamp(var(--space-md), 3vw, var(--space-xl)) clamp(var(--space-xl), 4.5vw, var(--space-2xl)); }
.hx-h { font: var(--wght-head) var(--hx-size)/0.86 var(--font-display); letter-spacing: var(--track-head); margin-inline-start: -0.04em; white-space: nowrap; overflow-wrap: normal; }
.hx-tunnel { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto; --hx-size: var(--text-hero); }
.hx-frame { position: relative; grid-column: 1; grid-row: 1 / span 2; min-block-size: clamp(22rem, 100cqi, 26rem); border: var(--edge) solid var(--color-ink); overflow: hidden; }
.hx-frame .art { position: absolute; inset: 0; block-size: 100%; }
.hx-plate { position: relative; z-index: 1; background: var(--color-paper); border: var(--edge) solid var(--color-ink); }
.hx-plate-h { grid-column: 1; grid-row: 1; justify-self: start; align-self: start; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs) 0.1em; padding: var(--space-xs) var(--space-md) var(--space-sm) var(--space-sm); font-size: var(--hx-size); }
.hx-bars { display: flex; gap: 0.07em; block-size: 0.69em; padding-inline: 0.1em; }   
.hx-bars i { inline-size: 0.13em; background: var(--k); border: var(--edge) solid var(--color-ink); transform: skewX(-14deg); }
.hx-plate-deck { grid-column: 1; grid-row: 3; margin-block-start: var(--space-lg); background: none; border: 0; }
.hx-side { grid-column: 1; grid-row: 4; margin-block-start: var(--space-md); }
@media (prefers-reduced-motion: no-preference) {
  .hx-bars i { transform-origin: 50% 100%; animation: hx-rise var(--dur-long) var(--ease-out) both; animation-delay: calc(var(--j, 0) * 40ms); }
  .hx-bars i:nth-child(2) { --j: 1; }
  .hx-bars i:nth-child(3) { --j: 2; }
  .hx-bars i:nth-child(4) { --j: 3; }
  .hx-bars i:nth-child(5) { --j: 4; }
  .hx-bars i:nth-child(6) { --j: 5; }
  @keyframes hx-rise { from { transform: skewX(-14deg) scaleY(0); } to { transform: skewX(-14deg) scaleY(1); } }
}
@media (min-width: 60rem) {
  .hx-tunnel { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr) auto; column-gap: var(--space-md); --hx-size: var(--text-hero-wide); }
  .hx-frame { grid-row: 1 / -1; min-block-size: clamp(30rem, 44cqi, 36rem); }
  .hx-plate-deck { grid-row: 3; align-self: end; justify-self: start; max-inline-size: 36rem; margin: 0; padding: var(--space-md) var(--space-lg) var(--space-md) var(--space-md); background: var(--color-paper); border: var(--edge) solid var(--color-ink); }
  .hx-side { grid-column: 2; grid-row: 1 / -1; align-self: end; margin: 0; writing-mode: vertical-rl; }
}
.art { display: block; inline-size: 100%; block-size: auto; color: var(--color-ink); }
.art .ln { fill: none; stroke: currentColor; stroke-width: 1px; vector-effect: non-scaling-stroke; }
.art .rim, .art .seam { fill: none; stroke: currentColor; stroke-width: var(--edge); vector-effect: non-scaling-stroke; }
.art .guide { fill: none; stroke: none; }
.art .ink { fill: var(--k); stroke: currentColor; stroke-width: var(--edge); vector-effect: non-scaling-stroke; }
.art .mesh path { fill: var(--color-paper); stroke: currentColor; stroke-width: 1px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.art .face { fill: var(--color-paper); }
.art .star, .art .solid { fill: currentColor; }
.art .face-line { fill: none; stroke: currentColor; stroke-width: 6px; stroke-linecap: square; }
.art .pl { fill: none; stroke: currentColor; stroke-width: 1.25px; }
.art .ring-t { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.14em; fill: currentColor; }
.art-code { fill: var(--color-ink); }
.spark, .kh-star, .kh-mini-star, .rail-star, .nf-star { display: block; aspect-ratio: 1; fill: var(--color-ink); }
.k-head { flex: none; inline-size: 0.5rem; block-size: 0.75rem; fill: none; stroke: currentColor; stroke-width: var(--edge); }
.k-head-r { transform: scaleX(-1); }
.kh { container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xl); }
.kh-text { display: grid; align-content: start; row-gap: clamp(var(--space-md), 2.5vw, var(--space-lg)); min-inline-size: 0; }
.kh .deck { margin: 0; }
.kh-art { position: relative; inline-size: min(100%, 28rem); }
.kh-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); font-size: var(--text-h1); }
.kh-pit { border: var(--edge) solid var(--color-ink); overflow: hidden; }
.art .trail { fill: none; stroke: currentColor; stroke-width: var(--edge); stroke-dasharray: 6 5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.art .mesh path.occ { stroke: none; }
.kh-code { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-xs) var(--space-md); margin-block-start: var(--space-sm); font: 500 var(--text-xs)/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; }
.kh-code .art-code { flex: none; inline-size: auto; max-inline-size: 100%; block-size: 1.75rem; }
.kh-opinion .kh-title { align-items: flex-start; flex-wrap: nowrap; }
.kh-two { line-height: 0.86; }
.kh-star { flex: none; inline-size: 0.62em; margin-block-start: 0.04em; }
.kh-box { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-md); align-items: start; padding: var(--space-md); border: var(--edge) solid var(--color-ink); }
.kh-marks { display: flex; gap: var(--space-xs); margin: 0; }
.kh-marks svg { inline-size: 1.5rem; block-size: 1.5rem; }
.kh-bar { display: block; block-size: clamp(0.875rem, 1.6vw, 1.25rem); background: var(--type); border: var(--edge) solid var(--color-ink); }
.kh-notes .page-title { margin-block: 0.18em; }
.kh-nul { position: relative; z-index: 0; }   
.kh-nul::before { content: ""; position: absolute; z-index: -1; inset-block-start: 50%; inset-inline-start: calc(100% - 1.15em); inline-size: 1.36em; aspect-ratio: 1; translate: 0 -50%; border-radius: 50%; background: var(--type); border: var(--edge) solid var(--color-ink); }
.kh-seen { margin: 0; font: 500 var(--text-xs)/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; }
.kh-notes .kh-art { aspect-ratio: 4 / 3; }
.kh-notes .art-smiley { position: absolute; inset: 6% auto auto 4%; inline-size: 64%; }
.kh-burst { position: absolute; inset: auto 2% 4% auto; inline-size: 32%; }
.kh-tape { flex: 1 1 4rem; min-inline-size: 3rem; max-inline-size: 16rem; block-size: 0.3em; border: var(--edge) solid var(--color-ink); background: repeating-linear-gradient(-45deg, var(--type) 0 0.55rem, var(--color-paper) 0 0.9rem); }
.kh-corr { display: flex; align-items: flex-end; gap: var(--space-sm); inline-size: min(100%, 20rem); }
.kh-corr .art-corridor { flex: 1 1 auto; min-inline-size: 0; }
.kh-vert { flex: none; display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); margin: 0; }
.kh-vert span { writing-mode: vertical-rl; font: var(--wght-head) clamp(1.75rem, 3.4vw, 2.75rem)/1.12 var(--font-display); letter-spacing: var(--track-head); }   
.kh-vcode { inline-size: 1.5rem; block-size: auto; }
.nf { padding-block: clamp(var(--space-md), 3vw, var(--space-xl)) clamp(var(--space-xl), 4.5vw, var(--space-2xl)); }
.nf-code { margin: 0; font: 500 var(--text-xs)/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; }
.nf-go { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); font-weight: 700; font-size: var(--text-ui); }
.nf-go a { text-decoration-thickness: 0.08em; }
.nf-go a:hover, .nf-go a:focus-visible { background: var(--c-yellow); }
.art-moon { position: absolute; inset: 7% 7% auto auto; inline-size: 13%; }
.nf-star { position: absolute; }
.nf-star-a { inset: 12% auto auto 60%; inline-size: 6%; }
.nf-star-b { inset: auto 9% 11% auto; inline-size: 4.5%; }
.rail-box { position: relative; margin-block-start: var(--space-xs); padding: var(--space-2xs) 2.75rem var(--space-2xs) var(--space-sm); border: var(--edge) solid var(--color-ink); }
.rail .rail-box dl { margin: 0; }
.rail-box div:last-child { border-block-end: 0; }
.rail-marks { position: absolute; inset: var(--space-xs) var(--space-xs) auto auto; display: flex; flex-direction: column; gap: var(--space-2xs); margin: 0; }
.rail-marks svg { inline-size: 1.25rem; block-size: 1.25rem; }
.rail-bar { display: block; block-size: var(--space-sm); margin-block-start: var(--space-xs); background: var(--type); border: var(--edge) solid var(--color-ink); }
.method-box { position: relative; }
.k-atom { position: absolute; inset: calc(var(--space-md) * -1) 0 auto auto; inline-size: 2.75rem; block-size: 2.75rem; background: var(--color-paper); }
.method-box .method div:first-child { padding-inline-end: 3.5rem; }
.raw { margin-block: var(--space-xl) var(--space-lg); }
.raw-hatch { block-size: clamp(4.5rem, 9vw, 6.5rem); border: var(--edge) solid var(--color-ink); background: repeating-linear-gradient(-45deg, var(--flag-dataset) 0 2px, transparent 0 10px); }
.post-body .raw p { margin: 0; }
.post-body .raw-t { margin-block-start: var(--space-sm); font: var(--wght-head) var(--text-lead)/0.95 var(--font-display); letter-spacing: var(--track-head); }
.post-body .raw-meta { margin-block-start: var(--space-xs); text-align: end; font: 500 var(--text-xs)/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-ink-2); }
.post-body .raw-get { margin-block-start: var(--space-sm); font-weight: 700; }
.warn { margin-block: var(--space-lg) 0; border: var(--edge) solid var(--color-ink); }
.post-body .warn p { margin: 0; }
.warn-head { display: flex; align-items: stretch; border-block-end: var(--edge) solid var(--color-ink); }
.warn-sq { display: grid; place-items: center; flex: none; inline-size: clamp(2.75rem, 5.6vw, 4rem); aspect-ratio: 1; background: var(--type); color: var(--on); border-inline-end: var(--edge) solid var(--color-ink); font: var(--wght-head) clamp(1.75rem, 3.6vw, 2.75rem)/1 var(--font-display); }
.warn-t { display: flex; align-items: center; min-inline-size: 0; padding: var(--space-xs) var(--space-md); font: var(--wght-head) clamp(1.25rem, 3vw, 2.25rem)/1 var(--font-display); letter-spacing: var(--track-head); text-transform: uppercase; }
.warn-strip { block-size: clamp(1.5rem, 3vw, 2.25rem); padding-block: var(--space-2xs); border-block-end: var(--edge) solid var(--color-ink); }
.warn-strip .art { block-size: 100%; }
.post-body .warn-body { padding: var(--space-md) var(--space-lg); font-size: var(--text-sm); line-height: 1.5; }
.end-mark { inline-size: min(100%, 16rem); margin-block-start: var(--space-xl); }
.more-h { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.more-h .art-rings { flex: none; inline-size: auto; block-size: 0.62em; }
.note-burst { inline-size: 3rem; margin: var(--space-sm) 0 0 auto; }   
.from-arrow { display: flex; align-items: center; margin-block-start: var(--space-sm); color: var(--color-ink); }
.from-arrow b { flex: 1; block-size: var(--edge); margin-inline-end: -1px; background: currentColor; }
.foot-kit { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-lg) var(--space-md); }
.foot-seal { inline-size: clamp(6.5rem, 22vw, 9rem); }
.foot-plus { position: relative; grid-column: 1 / -1; grid-row: 2; block-size: 4rem; }   
.foot-plus .art-plus { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.foot-plus .art-cross { position: absolute; inset: auto 0 0 auto; inline-size: 3rem; block-size: 3rem; background: var(--color-paper); }
.foot-label { display: grid; min-inline-size: 0; }
.foot-label-t { position: relative; z-index: 1; justify-self: start; margin: 0; padding: var(--space-xs) var(--space-sm); background: var(--color-paper); border: var(--edge) solid var(--color-ink); font: 700 var(--text-fine)/1.2 var(--font-body); }
.foot-code { margin: calc(var(--space-md) * -1) 0 0 var(--space-lg); }
.foot-code .art-tall { block-size: clamp(3.5rem, 8vw, 5.5rem); }
.foot-stars { inline-size: clamp(2.25rem, 6vw, 3.5rem); align-self: start; }
@media (prefers-reduced-motion: no-preference) {
  .kh .art .ink { transform-box: fill-box; transform-origin: 50% 50%; animation: k-pop var(--dur-long) var(--ease-out) both 80ms; }
  .kh-nul::before { animation: k-disc var(--dur-long) var(--ease-out) both 80ms; }
  .kh-bar, .kh-tape { transform-origin: 0 50%; animation: ink var(--dur-long) var(--ease-out) both 80ms; }
  .kh .art .k-ball { transform-box: fill-box; transform-origin: 50% 50%; animation: k-fall 700ms cubic-bezier(0.55, 0, 0.85, 0.4) both 150ms; }
  .kh .art .k-ball .ink { animation: none; }
  @keyframes k-fall { from { transform: translate(var(--dx), var(--dy)) scale(1.12); } to { transform: none; } }
  @keyframes k-pop { from { transform: scale(0); } to { transform: scale(1); } }
  @keyframes k-disc { from { scale: 0; } to { scale: 1; } }
}
@media (min-width: 40rem) {
  .post-note .post-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--gap); align-items: start; }
  .note-burst { inline-size: clamp(4rem, 9vw, 7rem); margin: 0; }
}
@media (min-width: 60rem) {
  .kh { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; }
  .kh-text { grid-column: 1 / span 7; }
  .kh-art { grid-column: 8 / -1; inline-size: 100%; }
  .kh-arc .kh-art { grid-column: 9 / -1; inline-size: min(100%, 20rem); justify-self: end; }
  .foot-kit { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .foot-seal { grid-column: 1 / span 2; }
  .foot-plus { grid-column: 3 / span 6; grid-row: 1; block-size: 8rem; }
  .foot-label { grid-column: 9 / span 3; }
  .foot-stars { grid-column: 12; justify-self: end; }
}
.post-body ul, .post-body ol { margin-block-end: var(--space-lg); padding-inline-start: 1.3em; }
.post-body ul { list-style: square; }
.post-body ol { list-style: decimal; }
.post-body li { margin-block-end: var(--space-xs); padding-inline-start: var(--space-2xs); text-wrap: pretty; }
.post-body li::marker { color: var(--color-ink); }
.post-body strong { font-weight: 700; }
.post-body code { font: 500 0.9em/1 var(--font-mono); }
.refs { margin-block-start: var(--space-xl); padding-block-start: var(--space-md); border-block-start: var(--rule) solid var(--color-ink); }
.post-body .refs-h { margin: 0 0 var(--space-xs); font: 500 var(--text-xs)/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-ink-2); }
.refs ol { margin: 0; padding-inline-start: 1.3em; list-style: decimal; font-size: var(--text-sm); line-height: 1.5; }
.refs li { margin-block-end: var(--space-2xs); }
.refs cite { font-style: normal; }
.tools .card-desc { padding-block-end: var(--card-pad); }
.tools .card-desc p + p { margin-block-start: 0.75em; }
.tools .card:not(.card-lead) .card-title { grid-column: 1 / -1; padding-inline-end: 0; }
.tools .card-lead .card-desc { font-size: clamp(1.0625rem, calc(var(--cw) * 0.021), 1.5rem); line-height: 1.24; max-inline-size: 44em; }
.tools .card-lead .card-tag { font-size: clamp(0.8125rem, calc(var(--cw) * 0.018), 1.125rem); }
.cards.tools-then-posts { padding-block-end: 0; }
@media (min-width: 33rem) {   
  .tools .card-lead .card-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tools .card-lead .card-title { grid-column: 1 / span 2; }
  .tools .card-lead .card-tag { grid-column: 3; }
}
@media (min-width: 40rem) {
  .cards.tools { --cw: calc((min(100vw, var(--wrap)) - 2 * var(--gutter) - var(--gap)) / 2); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards.tools .card-lead { --cw: calc(min(100vw, var(--wrap)) - 2 * var(--gutter)); grid-column: 1 / -1; }
}
@media (min-width: 68rem) {
  .cards.tools { --cw: calc((min(100vw, var(--wrap)) - 2 * var(--gutter) - 2 * var(--gap)) / 3); grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.key-topic { display: grid; grid-template-rows: auto 1fr auto; border: var(--edge) solid var(--color-ink); }
.key .chip-c { block-size: clamp(0.625rem, 1.15vw, 0.9375rem); }
.key a.key-about .chip-c { background: var(--c-orange); }
.key a.key-about:hover, .key a.key-about:focus-visible { background: var(--c-orange-tint); }
@media (min-width: 68rem) {
  .key ul { grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); }
}
.post-about .post-title { max-inline-size: 12em; }
.post-about .post-body h2::before { content: none; }   
.rail-about .rail-box { margin-block-start: 0; }
:root {
  --text-3xs: 0.625rem;   
  --font-cjk: "Hiragino Sans", "Yu Gothic", "Noto Sans CJK JP", "Noto Sans JP", Meiryo, sans-serif;   
}
.mt::before { content: attr(data-t); }
.key .chip-c { position: relative; }
.key .chip-c[data-hex]::before { content: attr(data-hex); position: absolute; inset: var(--space-2xs) auto auto var(--space-xs); font: 500 var(--text-3xs)/1 var(--font-mono); letter-spacing: 0.08em; color: var(--on); }
.key-flag[data-flag="dataset"] { --on: var(--c-black-on); }
.key a.key-about { --on: var(--c-orange-on); }
.post-body > .end-row { grid-column: 1 / -1; }
.end-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-lg) var(--space-xl); margin-block-start: var(--space-xl); }
.end-row .end-mark { flex: 0 1 16rem; margin: 0; }
.lbl { flex: 0 1 26rem; container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; border: var(--edge) solid var(--color-ink); font: 500 var(--text-3xs)/1.35 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.lbl-top { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-xs) var(--space-sm); border-block-end: var(--edge) solid var(--color-ink); }
.lbl-no::before { font: var(--wght-head) var(--text-mark)/1 var(--font-display); letter-spacing: var(--track-head); text-transform: none; white-space: nowrap; }
.lbl .lbl-code { flex: 0 1 auto; min-inline-size: 0; inline-size: auto; max-inline-size: 62%; block-size: 1.5rem; }
.lbl-ink, .lbl-read { display: grid; align-content: start; row-gap: var(--space-3xs); padding: var(--space-xs) var(--space-sm); min-inline-size: 0; overflow-wrap: anywhere; }
.lbl-ink { grid-column: 1; grid-row: 2; }
.lbl-read { grid-column: 2; grid-row: 2; border-inline-start: var(--rule) solid var(--color-ink); }
.lbl-sw { display: block; inline-size: var(--space-sm); block-size: var(--space-sm); margin-block-end: var(--space-2xs); background: var(--type); border: var(--edge) solid var(--color-ink); }
.lbl-topic::before { font-weight: 600; }
.lbl-k { grid-column: 3; grid-row: 2 / span 2; display: grid; place-items: center; padding: var(--space-xs) var(--space-sm); border-inline-start: var(--rule) solid var(--color-ink); }
.lbl-k .art-letter { inline-size: auto; block-size: 3.25rem; }
.lbl-foot { grid-column: 1 / 3; grid-row: 3; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3xs) var(--space-xs); min-inline-size: 0; padding: var(--space-2xs) var(--space-sm); border-block-start: var(--rule) solid var(--color-ink); }
.lbl-foot .mt { white-space: nowrap; }
.lbl-foot .lbl-globe { flex: none; inline-size: 1.125rem; block-size: 1.125rem; margin-inline-start: auto; }
.lbl-foot .mt:not(:last-of-type)::after, .slug-lbl .mt:not(:last-of-type)::after { content: "\00a0//"; }
@container (max-width: 24rem) {   
  .lbl-k { grid-row: 2; }
  .lbl-foot { grid-column: 1 / -1; }
}
@container (max-width: 20rem) {
  .lbl-ink, .lbl-read { padding-inline: var(--space-xs); }
  .lbl-k { padding-inline: var(--space-xs); }
  .lbl-k .art-letter { block-size: 2.5rem; }
  .lbl-foot { padding-inline: var(--space-xs); }
}
.art .lt-out { fill: var(--color-ink); stroke: var(--color-ink); stroke-width: 7px; stroke-linejoin: miter; vector-effect: non-scaling-stroke; }
.art .lt-gap { fill: var(--color-paper); stroke: var(--color-paper); stroke-width: 4.5px; stroke-linejoin: miter; vector-effect: non-scaling-stroke; }
.art .lt-in { fill: none; stroke: var(--color-ink); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.fig-no { display: inline-block; margin-inline-end: var(--space-xs); padding: var(--space-3xs) var(--space-2xs); border: var(--rule) solid var(--color-ink); font: 500 var(--text-3xs)/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink); vertical-align: 0.15em; }
.fig-no::before { content: attr(data-t); }
.foot-slug { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm) var(--space-lg); }
.slug-lbl { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-xs); margin: 0; font: 400 var(--text-xs)/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-ink-2); }
.slug-lbl .mt { white-space: nowrap; }
.slug-jp::before { font-family: var(--font-mono), var(--font-cjk); letter-spacing: 0.04em; }
.slug-lbl .slug-marks { flex: none; inline-size: auto; block-size: 1.375rem; color: var(--color-ink); }
.about-tire { inline-size: clamp(5rem, 24vw, 7rem); margin: var(--space-md) 0 0 auto; }
@media (min-width: 40rem) {
  .post-head-art { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--gap); align-items: center; }
  .post-head-art > * { grid-column: 1; }
  .post-head-art > .about-tire { grid-column: 2; grid-row: 1 / span 2; inline-size: clamp(7rem, 15vw, 13rem); margin: 0; }
}
.nf-tag { display: inline-flex; align-items: center; gap: var(--space-xs); justify-self: start; padding: var(--space-2xs) var(--space-sm) var(--space-2xs) var(--space-xs); border: var(--edge) solid var(--color-ink); }
.nf-tag .art-warn { flex: none; inline-size: 1.125rem; }
.nf-sub::before { content: "// " attr(data-t); color: var(--color-ink-2); }
.lg-no { margin-inline-start: auto; white-space: nowrap; }
@media (min-width: 60rem) {
  .lg-no { margin: auto 0 0; padding-block-start: var(--space-xs); }
}
.hx-spec, .price, .tool-no, .stat-pct, .col-l, .crate, .refs .src-host, .from-no, .lg-wd, .lg-range, .made, .code-t { font: 500 var(--text-3xs)/1.2 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.hx-spec { position: absolute; z-index: 1; inset: auto var(--space-sm) var(--space-sm) auto; display: grid; row-gap: var(--space-3xs); margin: 0; padding: var(--space-xs) var(--space-sm); background: var(--color-paper); border: var(--edge) solid var(--color-ink); }
.price { display: inline-flex; align-items: stretch; justify-self: start; margin: 0; border: var(--edge) solid var(--color-ink); }
.price-hole { flex: none; align-self: center; inline-size: var(--space-sm); block-size: var(--space-sm); margin-inline: var(--space-sm) var(--space-2xs); border: var(--edge) solid var(--color-ink); border-radius: 50%; }
.price .mt { display: flex; align-items: center; padding: var(--space-xs) var(--space-sm); }
.price .mt + .mt { border-inline-start: var(--rule) solid var(--color-ink); }
.price-v::before { font: var(--wght-head) var(--text-h3)/1 var(--font-display); letter-spacing: var(--track-head); }
.tool-no { position: absolute; inset: var(--space-sm) var(--space-sm) auto auto; pointer-events: none; color: var(--color-ink-2); }
.card-top:has(.tool-no) .card-title { padding-inline-end: 3.25rem; }
.post-body .stat-fig { position: relative; }
.stat-pct { position: absolute; inset: var(--space-sm) var(--space-sm) auto auto; }
.col-l { display: block; margin-block-end: var(--space-2xs); color: var(--color-ink-3); }
.raw-hatch { position: relative; }
.post-body .raw .crate { position: absolute; inset: var(--space-sm) auto auto var(--space-sm); display: flex; max-inline-size: calc(100% - 2 * var(--space-sm)); margin: 0; background: var(--color-paper); border: var(--edge) solid var(--color-ink); font-weight: 600; }
.crate .mt { padding: var(--space-2xs) var(--space-xs); white-space: nowrap; }
.crate .mt + .mt { border-inline-start: var(--rule) solid var(--color-ink); }
.refs .src-host { display: inline-block; margin-inline-start: var(--space-xs); padding: var(--space-3xs) var(--space-2xs); border: var(--rule) solid var(--color-rule-soft); color: var(--color-ink-2); vertical-align: 0.1em; }
.from-no { flex: none; margin-inline-start: var(--space-xs); }
.lg-wd { display: block; margin-block-start: var(--space-2xs); color: var(--color-ink-2); }
.lg-range { display: none; }
@media (min-width: 60rem) {
  .lg-range { display: block; margin-block-start: var(--space-2xs); color: var(--color-ink-2); }
}
.made { display: flex; align-items: center; gap: var(--space-xs); margin-block-start: var(--space-sm); padding: var(--space-xs) var(--space-sm); border: var(--edge) solid var(--color-ink); font-weight: 600; }
.made .made-star { flex: none; inline-size: var(--space-sm); block-size: var(--space-sm); fill: var(--color-ink); }
.code-t { display: block; margin-block-start: var(--space-2xs); letter-spacing: 0.32em; }
.mx-sel { --sel: var(--color-ink); --sel-on: var(--color-paper); }
.mx-sel [data-type], .mx-sel[data-type] { --sel: var(--type-band); --sel-on: var(--color-ink); }
.mx-sel .post-about { --sel: var(--c-orange); --sel-on: var(--color-ink); }
.mx-sel ::selection { background: var(--sel); color: var(--sel-on); }
.mx-list .post-body ul:not([class]) { list-style: none; }
.mx-list .post-body ul:not([class]) > li { position: relative; }
.mx-list .post-body ul:not([class]) > li::before { content: ""; position: absolute; inset-inline-start: -1.05em; inset-block-start: 0.52em; inline-size: 0.42em; block-size: 0.42em; background: var(--type); border: var(--edge) solid var(--color-ink); }
.room-no { position: absolute; z-index: 1; inset: 40% auto auto 62%; margin: 0; padding: var(--space-2xs) var(--space-xs); background: var(--color-paper); border: var(--edge) solid var(--color-ink); font: 600 var(--text-3xs)/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .key .chip-c[data-hex]::before { animation: mt-in var(--dur-short) linear both; animation-delay: calc(var(--dur-long) + var(--i, 0) * 40ms); }
  .about-tire .art .ink { transform-box: fill-box; transform-origin: 50% 50%; animation: k-pop var(--dur-long) var(--ease-out) both 80ms; }
  @keyframes mt-in { from { opacity: 0; } to { opacity: 1; } }
}