@font-face{font-family:Archivo;src:url("/assets/fonts/Archivo-Variable.woff2") format('woff2');font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url("/assets/fonts/IBMPlexMono-Regular.woff2") format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url("/assets/fonts/IBMPlexMono-Medium.woff2") format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Offset Han Sans';src:url("/assets/fonts/OffsetHanSans-00.woff2") format('woff2');font-weight:250 900;font-style:normal;font-display:swap;unicode-range:U+20,U+21,U+22,U+23,U+24,U+25,U+26,U+27,U+28,U+29,U+2A,U+2B,U+2C,U+2D,U+2E,U+2F,U+30,U+31,U+32,U+33,U+34,U+35,U+36,U+37,U+38,U+39,U+3A,U+3B,U+3C,U+3D,U+3E,U+3F,U+40,U+41,U+42,U+43,U+44,U+45,U+46,U+47,U+48,U+49,U+4A,U+4B,U+4C,U+4D,U+4E,U+4F,U+50,U+51,U+52,U+53,U+54,U+55,U+56,U+57,U+58,U+59,U+5A,U+5B,U+5C,U+5D,U+5F,U+60,U+61,U+62,U+63,U+64,U+65,U+66,U+67,U+68,U+69,U+6A,U+6B,U+6C,U+6D,U+6E,U+6F,U+70,U+71,U+72,U+73,U+74,U+75,U+76,U+77,U+78,U+79,U+7A,U+7B,U+7C,U+7D,U+7E,U+A9,U+B7,U+D7,U+2013,U+2014,U+201C,U+201D,U+2026,U+2161,U+2190,U+2191,U+2192,U+2193,U+2194,U+2197,U+2212,U+2500,U+2514,U+251C,U+3001,U+3002,U+300A,U+300B,U+300C,U+300D,U+4E00,U+4E01,U+4E03,U+4E09,U+4E0A,U+4E0B,U+4E0D,U+4E0E,U+4E13,U+4E14,U+4E1A,U+4E1C,U+4E22,U+4E24,U+4E25,U+4E2A,U+4E2D,U+4E32,U+4E34,U+4E3A,U+4E3B,U+4E3E,U+4E45,U+4E48,U+4E49,U+4E4B,U+4E5D,U+4E5F,U+4E60,U+4E66,U+4E86,U+4E89,U+4E8B,U+4E8C,U+4E8E,U+4E91,U+4E92,U+4E94,U+4E9B,U+4EA4,U+4EA7,U+4EAB,U+4EAE,U+4EBA,U+4EC0,U+4EC5,U+4ECA,U+4ECD,U+4ECE,U+4ED3,U+4ED6,U+4ED8,U+4EE3,U+4EE4,U+4EE5,U+4EEA,U+4EEC,U+4EF6,U+4EF7,U+4EFB,U+4EFD,U+4F18,U+4F1A,U+4F20,U+4F2A,U+4F30,U+4F38,U+4F3C,U+4F46,U+4F4D,U+4F4E,U+4F4F,U+4F53,U+4F55,U+4F59,U+4F5C,U+4F60,U+4F7F,U+4F8B,U+4F9B,U+4F9D,U+4FA7,U+4FBF,U+4FDD,U+4FE1,U+4FEE,U+5019,U+501F,U+503C,U+5047,U+504F,U+505A,U+505C,U+5065,U+5076,U+50A8,U+50CF,U+5141,U+5143,U+5145,U+5148,U+5149,U+514B,U+514D,U+515C,U+5165,U+5168,U+516B,U+516C,U+5171,U+5173,U+5176,U+5177,U+5178,U+517C,U+5185,U+518C,U+518D,U+5192,U+5199,U+51B2,U+51B3,U+51B5,U+51BB,U+51C6,U+51CF,U+51E0,U+51ED,U+51FA,U+51FB,U+51FD,U+5200,U+5206,U+5207,U+520A,U+5212,U+5217,U+5219,U+521A,U+521B,U+521D,U+5220,U+5224,U+5229,U+522B,U+5230,U+5236,U+5237,U+523B,U+524D,U+5265,U+5269,U+526A,U+526F,U+529B,U+529E,U+529F,U+52A0,U+52A1,U+52A8,U+52A9,U+52FE,U+5305,U+5316,U+5339,U+533A,U+5341,U+5347,U+5348,U+534A,U+534F,U+5355,U+5360,U+5361,U+5370,U+5373,U+5374,U+5377,U+5378,U+5382,U+5386,U+538B,U+539F,U+53BB,U+53C2,U+53C8,U+53CA,U+53CC,U+53CD,U+53D1,U+53D6,U+53D7,U+53D8,U+53E0,U+53E3,U+53E5,U+53E6,U+53EA,U+53EB,U+53EF,U+53F0,U+53F2,U+53F3,U+53F7,U+5404,U+5408,U+540C,U+540D,U+540E,U+5411,U+5417,U+5426,U+542B,U+542C,U+542F,U+5448,U+544A,U+5458,U+5462,U+5468,U+5473,U+547D,U+548C,U+54C1,U+54CD,U+54EA,U+552F,U+5584,U+559C,U+5668,U+56DB,U+56DE,U+56E0,U+56E2,U+56F4,U+56FA,U+56FE,U+5706,U+5728,U+5730,U+573A}
@font-face{font-family:'Offset Han Sans';src:url("/assets/fonts/OffsetHanSans-01.woff2") format('woff2');font-weight:250 900;font-style:normal;font-display:swap;unicode-range:U+5747,U+574F,U+5750,U+5757,U+5782,U+578B,U+57CE,U+57DF,U+57FA,U+585E,U+586B,U+5883,U+589E,U+58C1,U+58F0,U+5904,U+5907,U+590D,U+5916,U+591A,U+591C,U+591F,U+5927,U+5929,U+592A,U+5931,U+5934,U+5947,U+5957,U+597D,U+5982,U+59CB,U+5A92,U+5B50,U+5B57,U+5B58,U+5B66,U+5B83,U+5B88,U+5B89,U+5B8C,U+5B98,U+5B9A,U+5B9C,U+5B9E,U+5BA1,U+5BA2,U+5BA3,U+5BA4,U+5BAB,U+5BB6,U+5BB9,U+5BBD,U+5BBF,U+5BC6,U+5BDF,U+5BF8,U+5BF9,U+5BFB,U+5BFC,U+5C04,U+5C06,U+5C0F,U+5C11,U+5C14,U+5C18,U+5C1A,U+5C1D,U+5C24,U+5C31,U+5C3A,U+5C3E,U+5C40,U+5C42,U+5C4F,U+5C55,U+5C5E,U+5C9B,U+5D4C,U+5DE5,U+5DE6,U+5DEE,U+5DF1,U+5DF2,U+5E02,U+5E03,U+5E0C,U+5E26,U+5E27,U+5E2E,U+5E38,U+5E42,U+5E55,U+5E72,U+5E73,U+5E74,U+5E76,U+5E7F,U+5E8F,U+5E93,U+5E94,U+5E95,U+5EA6,U+5EB7,U+5ECA,U+5EF6,U+5EFA,U+5F00,U+5F02,U+5F03,U+5F0F,U+5F15,U+5F20,U+5F39,U+5F3A,U+5F52,U+5F53,U+5F55,U+5F62,U+5F69,U+5F71,U+5F80,U+5F84,U+5F85,U+5F88,U+5F97,U+5FAA,U+5FC3,U+5FC5,U+5FC6,U+5FD7,U+5FEB,U+5FF5,U+5FFD,U+6000,U+6001,U+600E,U+601D,U+6027,U+603B,U+6062,U+606F,U+6089,U+60AC,U+60C5,U+60EF,U+60F3,U+610F,U+611F,U+613F,U+6162,U+61C2,U+6210,U+6211,U+6216,U+622A,U+6237,U+6240,U+624B,U+624D,U+6253,U+6263,U+6267,U+6269,U+626B,U+626D,U+6270,U+6279,U+627E,U+627F,U+6280,U+6284,U+628A,U+6298,U+62A2,U+62A4,U+62A5,U+62B5,U+62BD,U+62C5,U+62C6,U+62C9,U+62D2,U+62D6,U+62DF,U+62E5,U+62E9,U+62EC,U+62FC,U+62FF,U+6301,U+6302,U+6307,U+6309,U+6311,U+6321,U+632A,U+6362,U+636E,U+6388,U+6389,U+6392,U+63A2,U+63A5,U+63A7,U+63A8,U+63A9,U+63CF,U+63D0,U+63D2,U+641C,U+642C,U+642D,U+643A,U+6458,U+64A4,U+64AD,U+64CD,U+64E6,U+652F,U+6536,U+6539,U+653E,U+653F,U+6548,U+654F,U+6559,U+6563,U+6570,U+6574,U+6587,U+6599,U+659C,U+65AD,U+65B0,U+65B9,U+65BD,U+65E0,U+65E2,U+65E5,U+65E7,U+65E9,U+65F6,U+660E,U+6613,U+661F,U+6620,U+662F,U+663E,U+666E,U+666F,U+6682,U+6697,U+66F2,U+66F4,U+66FE,U+66FF,U+6700,U+6708,U+6709,U+670D,U+671B,U+671F,U+672A,U+672B,U+672C,U+672F,U+6731,U+673A,U+6743,U+6750,U+675F,U+6761,U+6765,U+677E,U+677F,U+6784,U+6790,U+679A,U+679C,U+67B6,U+67D0,U+67D3,U+67E5,U+6807,U+680F,U+6811,U+6821,U+6837,U+6838,U+6839,U+683C,U+6846,U+6848,U+684C,U+6863,U+68B0,U+68C0,U+68F5,U+695A,U+6982,U+6A21,U+6A2A,U+6B21,U+6B22,U+6B3E,U+6B62,U+6B63,U+6B64,U+6B65,U+6B66,U+6B67,U+6B8A,U+6B8B,U+6BB5,U+6BC1,U+6BCF,U+6BD4,U+6C34,U+6C38,U+6C42,U+6C47,U+6C99,U+6CA1,U+6CBF,U+6CD5,U+6CDB,U+6CE8,U+6D3B,U+6D3E,U+6D41,U+6D45,U+6D4B,U+6D4F,U+6D77,U+6D88,U+6D89,U+6DC6,U+6DF1,U+6DF7,U+6DFB,U+6E05,U+6E10,U+6E32,U+6E38,U+6E90,U+6EAF,U+6ED1,U+6EDA,U+6EE1,U+6EE4,U+6F0F,U+6F14,U+6F2B,U+6FC0,U+706F,U+7070,U+70B9,U+7136,U+7167}
@font-face{font-family:'Offset Han Sans';src:url("/assets/fonts/OffsetHanSans-02.woff2") format('woff2');font-weight:250 900;font-style:normal;font-display:swap;unicode-range:U+719F,U+7206,U+7236,U+7247,U+7248,U+7269,U+7275,U+7279,U+72B6,U+72EC,U+731C,U+732E,U+73AF,U+73B0,U+7406,U+7518,U+751A,U+751F,U+7528,U+7531,U+7535,U+753B,U+754C,U+7559,U+7565,U+7591,U+75D5,U+767B,U+767D,U+767E,U+7684,U+76AE,U+76D1,U+76D6,U+76D8,U+76EE,U+76EF,U+76F2,U+76F4,U+76F8,U+7701,U+770B,U+771F,U+773C,U+7740,U+77E5,U+77ED,U+7801,U+7834,U+7840,U+786C,U+786E,U+78C1,U+793A,U+793E,U+7981,U+79BB,U+79C1,U+79CD,U+79D2,U+79EF,U+79F0,U+79FB,U+7A0B,U+7A33,U+7A76,U+7A7A,U+7A7F,U+7A81,U+7A84,U+7A97,U+7ACB,U+7AD9,U+7ADF,U+7AE0,U+7AEF,U+7B14,U+7B26,U+7B2C,U+7B49,U+7B54,U+7B56,U+7B5B,U+7B7E,U+7B80,U+7B97,U+7BA1,U+7BB1,U+7BC7,U+7C7B,U+7C98,U+7CBE,U+7CCA,U+7CFB,U+7D20,U+7D22,U+7D2F,U+7EA0,U+7EA2,U+7EA6,U+7EA7,U+7EAF,U+7EB3,U+7EB5,U+7EB8,U+7EBF,U+7EC4,U+7EC6,U+7EC7,U+7EC8,U+7ECF,U+7ED1,U+7ED3,U+7ED5,U+7ED8,U+7ED9,U+7EDC,U+7EDD,U+7EDF,U+7EE7,U+7EEA,U+7EED,U+7EF4,U+7F00,U+7F13,U+7F16,U+7F18,U+7F29,U+7F3A,U+7F51,U+7F6E,U+7F72,U+7FFB,U+8003,U+8005,U+800C,U+8017,U+804A,U+804C,U+8054,U+805A,U+80A4,U+80AF,U+80CC,U+80FD,U+8109,U+811A,U+8131,U+81EA,U+81F3,U+81F4,U+820D,U+822A,U+8272,U+8282,U+82B1,U+82E5,U+82F1,U+8303,U+83B7,U+83DC,U+843D,U+8499,U+84C4,U+84DD,U+85CF,U+8651,U+865A,U+884C,U+8854,U+8865,U+8868,U+88AB,U+88C1,U+88C5,U+897F,U+8981,U+8986,U+89C1,U+89C2,U+89C4,U+89C6,U+89C8,U+89C9,U+89D2,U+89E3,U+89E6,U+8A00,U+8BA1,U+8BA4,U+8BA8,U+8BA9,U+8BAE,U+8BB0,U+8BB2,U+8BB8,U+8BBA,U+8BBE,U+8BBF,U+8BC1,U+8BC4,U+8BC6,U+8BCA,U+8BCD,U+8BD1,U+8BD5,U+8BDD,U+8BE2,U+8BE5,U+8BE6,U+8BED,U+8BEF,U+8BF4,U+8BF7,U+8BFA,U+8BFB,U+8C01,U+8C03,U+8C08,U+8C61,U+8D1F,U+8D21,U+8D23,U+8D25,U+8D26,U+8D28,U+8D2F,U+8D34,U+8D44,U+8D4B,U+8D56,U+8D70,U+8D77,U+8D85,U+8D8A,U+8DB3,U+8DC3,U+8DD1,U+8DDD,U+8DDF,U+8DE8,U+8DEF,U+8DF3,U+8DF5,U+8E2A,U+8EAB,U+8F68,U+8F6C,U+8F6E,U+8F6F,U+8F7B,U+8F7D,U+8F83,U+8F85,U+8F91,U+8F93,U+8FA8,U+8FB9,U+8FBE,U+8FC1,U+8FC7,U+8FD0,U+8FD1,U+8FD4,U+8FD8,U+8FD9,U+8FDB,U+8FDC,U+8FDE,U+8FF0,U+8FF9,U+8FFD,U+9000,U+9001,U+9002,U+9009,U+900F,U+9010,U+9012,U+9014,U+9017,U+901A,U+9020,U+903B,U+903E,U+9047,U+904D,U+9053,U+9057,U+9075,U+907F,U+90A3,U+90AE,U+90BB,U+90E8,U+90FD,U+914D,U+91C7,U+91CA,U+91CC,U+91CD,U+91CE,U+91CF,U+9488,U+949F,U+94A5,U+94AE,U+94FE,U+9500,U+9501,U+9519,U+952E,U+955C,U+957F,U+95E8,U+95EA,U+95ED,U+95EE,U+95F4,U+9605,U+961F,U+9634,U+9636,U+963B,U+9644,U+9645,U+9648,U+964D,U+9650,U+9664,U+9669,U+9686,U+968F,U+9690,U+9694,U+969C,U+96BE,U+96C6,U+96F6,U+96FE,U+9700,U+9759,U+975E,U+9760,U+9762,U+9875,U+9876,U+9879,U+987A,U+987B,U+987E,U+9884,U+9886,U+9891,U+9897,U+9898,U+989C,U+989D,U+98CE,U+9996}
@font-face{font-family:'Offset Han Sans';src:url("/assets/fonts/OffsetHanSans-03.woff2") format('woff2');font-weight:250 900;font-style:normal;font-display:swap;unicode-range:U+9A71,U+9A8C,U+9AA4,U+9AD8,U+9B54,U+9ED1,U+9ED8,U+9F50,U+FF01,U+FF08,U+FF09,U+FF0B,U+FF0C,U+FF1A,U+FF1B,U+FF1F}

:root {
  --paper:#f1efe9;
  --ink:#17191c;
  --red:#ff4d2e;
  --muted:#63635e;
  --line:#c8c5bd;
  --surface:#e9e5da;
  --surface-hover:#ded9ce;
  --accent-text:#a33824;
  --on-accent:#17191c;
  --gutter:32px;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --body:'Offset Han Sans','Noto Sans CJK SC','Microsoft YaHei',sans-serif;
  --display:'Archivo','Offset Han Sans',sans-serif;
  --mono:'IBM Plex Mono',monospace;
  color-scheme:light;
  font-family:var(--body);
  font-size:16px;
  font-synthesis:none
}

/* Explicit choices take priority; an unset or system preference follows the OS. */
:root[data-theme="dark"] {
  --paper:#151618;
  --ink:#eeeae2;
  --muted:#aaa69e;
  --line:#414143;
  --surface:#202123;
  --surface-hover:#2c2d30;
  --accent-text:#ff9178;
  color-scheme:dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:#151618;
    --ink:#eeeae2;
    --muted:#aaa69e;
    --line:#414143;
    --surface:#202123;
    --surface-hover:#2c2d30;
    --accent-text:#ff9178;
    color-scheme:dark;
  }
}

* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:108px
}
body {
  background:var(--paper);
  color:var(--ink);
  margin:0
}
h1,h2,h3,p,figure {
  margin:0
}
a {
  color:inherit;
  text-underline-offset:4px;
  text-decoration-thickness:1px
}
button,input,select {
  font:inherit;
  color:inherit
}
button,a,input,summary {
  touch-action:manipulation
}
button {
  cursor:pointer
}
button:disabled {
  cursor:default
}
img,svg {
  display:block;
  max-width:100%;
  height:auto
}
button,a,input,summary,select {
  outline-offset:5px
}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible,select:focus-visible {
  outline:2px solid var(--ink)
}
::selection {
  background:var(--red);
  color:var(--on-accent)
}
[hidden] {
  display:none!important
}
.mono,.eyebrow {
  font: .75rem/1.5 var(--mono);
  letter-spacing:.025em
}
.eyebrow {
  font-size:.8125rem
}
.muted {
  color:var(--muted)
}
.skip {
  position:fixed;
  top:-100px;
  left:20px;
  z-index:100;
  background:var(--ink);
  color:var(--paper);
  padding:14px
}
.skip:focus {
  top:10px
}
.wrap {
  padding-left:var(--gutter);
  padding-right:var(--gutter)
}

.cover-head {
  display:grid;
  grid-template-columns:9fr 3fr;
  gap:24px;
  align-items:end;
  padding-top:36px;
  padding-bottom:26px
}
.wordmark {
  font-family:var(--display);
  font-variation-settings:'wght' 900,'wdth' 88;
  font-weight:900;
  font-size:clamp(110px,16vw,240px);
  letter-spacing:-.065em;
  line-height:.88;
  overflow-wrap:anywhere
}
.cover-side {
  font-size:.875rem;
  line-height:1.75;
  max-width:260px;
  padding-bottom:8px
}
.cover-side p {
  margin-top:22px
}
.cover-side .mono {
  font-size:.6875rem;
  color:var(--muted)
}
.cut-panel {
  background:var(--red);
  padding:26px var(--gutter) 32px;
  position:relative;
  overflow:hidden
}
.panel-meta {
  display:flex;
  justify-content:space-between;
  gap:20px;
  font: .6875rem/1.5 var(--mono);
  border-bottom:1px solid rgb(23 25 28 / 35%);
  padding-bottom:17px
}
.cut-inner {
  display:grid;
  grid-template-columns:4fr 8fr;
  gap:40px;
  min-height:238px;
  align-items:center;
  padding-top:24px
}
.cut-title {
  font-size:clamp(2rem,3.2vw,3.5rem);
  font-weight:800;
  line-height:1.3
}
.cut-title span {
  display:block
}
.cut-title .small {
  font-size:.75rem;
  font-family:var(--mono);
  font-weight:400;
  margin-top:22px;
  line-height:1.6
}
.system-diagram {
  width:100%;
  color:var(--ink)
}
.diagram-nodes {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px
}
.diagram-node {
  border:1px solid currentColor;
  min-height:100px;
  padding:16px;
  position:relative
}
.diagram-node:not(:last-child):after {
  content:'';
  width:28px;
  height:1px;
  background:currentColor;
  position:absolute;
  right:-29px;
  top:50%
}
.diagram-node small {
  font: .6875rem var(--mono);
  display:block;
  margin-bottom:12px
}
.diagram-node strong {
  font-size:1.05rem;
  font-weight:700;
  line-height:1.6
}
.diagram-note {
  border-left:1px solid currentColor;
  border-bottom:1px solid currentColor;
  margin:0 7% 0 16%;
  height:35px;
  position:relative
}
.diagram-note:after {
  content:'';
  position:absolute;
  width:1px;
  height:8px;
  background:currentColor;
  right:0;
  bottom:0
}
.diagram-legend {
  font-size:.75rem;
  line-height:1.7;
  padding-top:13px;
  text-align:center
}
.feature-caption {
  display:grid;
  grid-template-columns:1fr 2fr 1fr;
  gap:24px;
  padding-top:24px;
  padding-bottom:34px;
  border-bottom:1px solid var(--ink);
  align-items:start
}
.feature-caption h2 {
  font:750 1.7rem/1.2 var(--display)
}
.feature-caption h2 a {
  text-decoration:none
}
.feature-caption p {
  font-size:.9rem;
  line-height:1.8;
  max-width:570px
}
.text-link {
  font-size:.875rem;
  display:inline-flex;
  gap:12px;
  align-items:center;
  justify-self:end;
  white-space:nowrap
}
.text-link:before {
  content:'+';
  font:1.2rem var(--mono);
  text-decoration:none
}
.feature-caption .mono {
  color:var(--muted);
  font-size:.6875rem;
  display:block;
  margin-bottom:10px
}
.section {
  padding-top:72px;
  padding-bottom:72px
}
.section-label {
  display:flex;
  justify-content:space-between;
  gap:24px;
  padding-bottom:20px;
  border-bottom:1px solid var(--ink)
}
.section-label .mono {
  font-size:.6875rem;
  color:var(--muted)
}
.section-title {
  font-size:clamp(2.4rem,4.5vw,4.5rem);
  line-height:1.25;
  font-weight:800;
  margin:32px 0 40px
}
.editorial-project {
  display:grid;
  grid-template-columns:4fr 8fr;
  gap:32px;
  padding:42px 0;
  border-bottom:1px solid var(--line);
  align-items:start
}
.project-copy .mono {
  color:var(--muted)
}
.project-copy h3 {
  font-size:2rem;
  line-height:1.35;
  margin:22px 0 16px;
  font-family:var(--display);
  font-weight:750;
  overflow-wrap:anywhere
}
.project-copy p {
  font-size:.9375rem;
  line-height:1.85;
  max-width:360px;
  margin-bottom:25px
}
.project-copy .text-link {
  justify-self:start
}
.project-visual {
  min-width:0;
  display:block;
  text-decoration:none
}
.theme-figure {
  --paper:#f1efe9;
  --ink:#17191c;
  --muted:#63635e;
  background:var(--ink);
  color:var(--paper);
  padding:30px;
  min-height:340px;
  display:flex;
  flex-direction:column;
  justify-content:space-between
}
.figure-heading {
  font: .6875rem var(--mono);
  display:flex;
  justify-content:space-between;
  gap:18px
}
.theme-flow {
  display:flex;
  align-items:center;
  gap:24px;
  margin:40px 0
}
.color-input {
  display:flex;
  flex-direction:column;
  gap:12px;
  font: .7rem var(--mono)
}
.swatch {
  display:flex;
  align-items:center;
  gap:10px
}
.swatch:before {
  content:'';
  display:block;
  width:30px;
  height:30px;
  border:1px solid #aaa;
  background:var(--swatch)
}
.map-line {
  flex:1;
  height:1px;
  background:#9a9892;
  min-width:20px;
  position:relative
}
.map-line:after {
  content:'模板映射';
  position:absolute;
  font-size:.75rem;
  white-space:nowrap;
  left:50%;
  top:-25px;
  transform:translateX(-50%)
}
.candidate-example {
  border:1px solid #aaa;
  background:var(--paper);
  color:var(--ink);
  padding:16px;
  min-width:205px
}
.candidate-example>span {
  font: .75rem var(--mono);
  display:block;
  margin-bottom:13px;
  color:var(--muted)
}
.candidate-row {
  display:flex;
  gap:17px;
  font-size:1rem;
  align-items:center;
  white-space:nowrap
}
.candidate-row b {
  font-weight:500;
  background:#d3bea0;
  color:#221b11;
  padding:6px 10px
}
.figcaption {
  font-size:.75rem;
  line-height:1.65;
  border-top:1px solid #63635e;
  padding-top:16px;
  color:#c8c5bd
}
.skills-figure {
  background:var(--paper);
  border:1px solid var(--ink);
  min-height:335px;
  padding:30px;
  display:flex;
  flex-direction:column;
  justify-content:space-between
}
.skills-lines {
  margin:28px 0
}
.skills-lines>div {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:20px;
  border-bottom:1px solid var(--line);
  padding:13px 0
}
.skills-lines strong {
  font-size:clamp(1.5rem,2.5vw,2.4rem);
  line-height:1.2;
  font-weight:750
}
.skills-lines span {
  font: .7rem var(--mono);
  text-align:right
}
.skills-lines>div:last-child {
  border-color:var(--red)
}
.skills-figure .figcaption {
  color:var(--muted);
  border:none;
  padding-top:0
}
.diagram-caption {
  font-size:.75rem;
  color:var(--muted);
  margin-top:13px;
  line-height:1.7
}
.writing-preview {
  background:var(--ink);
  color:var(--paper)
}
.writing-preview .section-label {
  border-color:#76746e
}
.writing-preview .mono {
  color:#c8c5bd
}
.writing-preview a:focus-visible {
  outline-color:var(--paper)
}
.writing-preview .section-title {
  margin-bottom:30px
}
.writing-row {
  display:grid;
  grid-template-columns:72px 1fr 135px;
  gap:24px;
  border-top:1px solid #66645f;
  align-items:start;
  padding:30px 0;
  text-decoration:none;
  transition:padding-left 180ms
}
.writing-row:last-child {
  border-bottom:1px solid #66645f
}
.writing-row:hover {
  padding-left:7px
}
.writing-row h3 {
  font-size:clamp(1.3rem,2.2vw,2rem);
  font-weight:700;
  line-height:1.45
}
.writing-row p {
  font-size:.875rem;
  line-height:1.85;
  margin-top:10px;
  color:#c8c5bd
}
.writing-row time {
  font: .75rem var(--mono);
  text-align:right;
  padding-top:6px
}
.writing-row .mono {
  padding-top:6px
}
.section-end {
  display:flex;
  justify-content:flex-end;
  margin-top:30px
}
.index-callout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  padding-top:52px;
  padding-bottom:52px;
  background:var(--red);
  color:var(--on-accent)
}
.index-callout h2 {
  font-size:clamp(2rem,4.3vw,4rem);
  line-height:1.2
}
.index-callout>div {
  justify-self:end;
  display:flex;
  flex-direction:column;
  align-items:end;
  gap:20px
}
.index-callout p {
  font-size:.9375rem;
  line-height:1.8
}
.footer {
  padding-top:32px;
  padding-bottom:30px;
  display:flex;
  justify-content:space-between;
  align-items:start;
  gap:30px
}
.footer-brand {
  font-family:var(--display);
  font-size:1.25rem;
  font-weight:800
}
.footer-note {
  font-size:.75rem;
  line-height:1.75;
  color:var(--muted);
  margin-top:10px
}
.footer-links {
  display:flex;
  gap:26px;
  font-size:.8125rem
}
.footer .mono {
  font-size:.6875rem;
  color:var(--muted)
}
.page-intro {
  padding-top:60px;
  padding-bottom:48px;
  border-bottom:1px solid var(--ink)
}
.page-intro .eyebrow {
  color:var(--muted)
}
.page-intro h1 {
  font-size:clamp(3rem,7vw,7rem);
  font-weight:800;
  line-height:1.2;
  margin-top:20px
}
.page-intro>p {
  font-size:1rem;
  line-height:1.85;
  max-width:680px;
  margin-top:24px
}
.directory {
  padding-top:24px;
  padding-bottom:64px
}
.directory-head,.work-row {
  display:grid;
  grid-template-columns:58px minmax(0,1.4fr) minmax(0,1.8fr) 95px 85px;
  gap:24px;
  align-items:start
}
.directory-head {
  font-size:.75rem;
  color:var(--muted);
  padding:20px 0;
  border-bottom:1px solid var(--ink)
}
.work-row {
  border-bottom:1px solid var(--line);
  padding:30px 0
}
.work-row h2 {
  font:750 1.35rem/1.4 var(--display);
  overflow-wrap:anywhere
}
.work-row h2 a {
  text-decoration:none
}
.work-row h2 a:hover {
  text-decoration:underline
}
.work-row p {
  font-size:.9375rem;
  line-height:1.8
}
.work-row>.mono {
  padding-top:4px
}
.work-row .state {
  font-size:.75rem;
  border-left:2px solid var(--red);
  padding-left:10px;
  line-height:1.7
}
.work-row>.source-link {
  font-size:.875rem;
  justify-self:end
}
.directory-footnote {
  font-size:.75rem;
  color:var(--muted);
  margin-top:24px;
  line-height:1.8
}
.work-row:focus-within,.work-row:hover {
  background:var(--surface-hover)
}
.listing-controls {
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  padding:25px 0;
  border-bottom:1px solid var(--ink)
}
.listing-controls label {
  font-size:.875rem
}
.listing-controls select {
  border:1px solid var(--ink);
  background:transparent;
  padding:9px 35px 9px 12px;
  font-size:.875rem;
  border-radius:0
}
.listing-controls .count {
  font: .75rem var(--mono);
  margin-left:auto
}
.light-list .writing-row {
  border-color:var(--line)
}
.light-list .writing-row p {
  color:var(--muted)
}
.light-list .writing-row .mono {
  color:var(--muted)
}
.search-form {
  display:flex;
  gap:0;
  margin-top:32px;
  max-width:800px;
  border:1px solid var(--ink);
  background:var(--paper)
}
.search-form input {
  min-width:0;
  flex:1;
  border:0;
  background:none;
  padding:18px;
  font-size:1.125rem;
  outline-offset:-5px
}
.search-form button {
  background:var(--ink);
  color:var(--paper);
  border:0;
  border-radius:0;
  padding:14px 24px;
  font-size:.875rem
}
.search-form button:focus-visible {
  outline-color:var(--red);
  outline-offset:-6px
}
.result-row {
  display:grid;
  grid-template-columns:70px minmax(0,1fr) 120px;
  gap:24px;
  padding:25px 0;
  border-bottom:1px solid var(--line);
  text-decoration:none
}
.result-row .kind {
  font-size:.75rem;
  border-left:2px solid var(--red);
  padding-left:10px
}
.result-row h2 {
  font-size:1.25rem;
  line-height:1.5;
  font-weight:700
}
.result-row p {
  font-size:.875rem;
  color:var(--muted);
  margin-top:8px;
  line-height:1.8
}
.result-row:hover h2 {
  text-decoration:underline
}
.result-row .mono {
  font-size:.6875rem;
  text-align:right
}
.empty-state {
  padding:50px 0;
  font-size:1rem;
  line-height:1.8
}
.noscript-note {
  font-size:.8125rem;
  padding:15px 0;
  color:var(--muted)
}
.case-heading {
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:32px;
  padding:52px var(--gutter) 42px;
  border-bottom:1px solid var(--ink)
}
.back-link {
  font-size:.8125rem;
  display:inline-block;
  margin-bottom:30px
}
.case-heading h1 {
  font:800 clamp(2.5rem,5.4vw,5.5rem)/1.08 var(--display);
  overflow-wrap:anywhere
}
.case-heading .eyebrow {
  color:var(--muted);
  margin:20px 0
}
.case-heading p {
  font-size:1rem;
  line-height:1.9;
  max-width:680px
}
.case-heading>aside {
  align-self:end;
  padding-bottom:8px;
  font-size:.8125rem;
  line-height:1.9
}
.case-heading>aside p {
  font-size:.8125rem;
  margin-top:12px
}
.case-visual {
  margin:32px var(--gutter) 0;
  background:var(--red);
  padding:35px;
  max-height:none
}
.case-visual .cut-inner {
  min-height:220px
}
.case-visual .skills-figure,.case-visual .theme-figure {
  max-width:850px;
  margin:auto
}
.case-layout {
  display:grid;
  grid-template-columns:220px minmax(0,740px);
  gap:80px;
  max-width:1200px;
  margin:auto;
  padding:60px var(--gutter) 80px
}
.local-toc {
  position:sticky;
  top:108px;
  align-self:start
}
.local-toc .eyebrow {
  color:var(--muted);
  margin-bottom:20px
}
.local-toc nav {
  display:flex;
  flex-direction:column;
  gap:16px
}
.local-toc a {
  font-size:.875rem;
  text-decoration:none;
  line-height:1.7
}
.local-toc a:hover {
  text-decoration:underline
}
.local-toc a span {
  font: .6875rem var(--mono);
  color:var(--muted);
  margin-right:14px
}
.prose {
  min-width:0;
  font-size:18px;
  line-height:1.85;
  max-width:42rem
}
.prose p {
  margin:0 0 24px
}
.prose h2 {
  font-size:1.6rem;
  line-height:1.5;
  margin:48px 0 24px;
  font-weight:750;
  position:relative
}
.prose h2:first-child {
  margin-top:0
}
.prose h3 {
  font-size:1.15rem;
  margin:28px 0 16px
}
.prose a {
  color:var(--ink)
}
.prose .ref {
  font-size:.75em;
  margin-left:4px;
  white-space:nowrap
}
.heading-anchor {
  font: .85rem var(--mono);
  text-decoration:none;
  margin-left:12px;
  color:var(--muted)!important;
  opacity:0
}
.prose h2:hover .heading-anchor,.heading-anchor:focus-visible {
  opacity:1
}
.prose blockquote {
  border-left:3px solid var(--red);
  padding:8px 0 8px 24px;
  margin:32px 0;
  font-size:1.1em;
  font-weight:500
}
.evidence-list {
  padding-left:24px;
  font-size:.9375rem
}
.evidence-list li {
  padding:7px 0
}
.limitations {
  border-top:1px solid var(--ink);
  padding-top:24px;
  margin-top:32px
}
.limitations h3 {
  margin:0 0 16px
}
.related {
  border-top:1px solid var(--line);
  margin-top:44px;
  padding-top:28px
}
.related h2 {
  font-size:1.2rem;
  margin:0 0 20px
}
.related-item {
  display:block;
  padding:16px 0;
  border-bottom:1px solid var(--line);
  text-decoration:none!important
}
.related-item strong {
  font-size:1rem;
  line-height:1.6;
  display:block
}
.related-item p {
  font-size:.8125rem;
  color:var(--muted);
  line-height:1.8;
  margin:6px 0 0
}
.related-item:hover strong {
  text-decoration:underline
}
.article-heading {
  padding:44px var(--gutter) 40px;
  border-bottom:1px solid var(--ink)
}
.article-heading .article-meta {
  font: .75rem/1.8 var(--mono);
  color:var(--muted);
  display:flex;
  gap:24px;
  flex-wrap:wrap
}
.article-heading h1 {
  font-size:clamp(2.5rem,5vw,5rem);
  line-height:1.3;
  font-weight:800;
  max-width:1100px;
  margin:24px 0
}
.article-heading .deck {
  font-size:1.125rem;
  line-height:1.85;
  max-width:750px
}
.article-layout {
  display:grid;
  grid-template-columns:220px minmax(0,42rem);
  gap:75px;
  max-width:1200px;
  margin:auto;
  padding:48px var(--gutter) 80px
}
.article-toc {
  position:sticky;
  top:108px;
  align-self:start
}
.article-toc summary {
  font-size:.8125rem;
  cursor:pointer;
  padding-bottom:18px;
  border-bottom:1px solid var(--line)
}
.article-toc nav {
  display:flex;
  flex-direction:column;
  gap:16px;
  padding-top:20px
}
.article-toc a {
  font-size:.8125rem;
  text-decoration:none;
  line-height:1.8
}
.article-toc a:hover {
  text-decoration:underline
}
.article-toc span {
  font: .6875rem var(--mono);
  color:var(--muted);
  margin-right:10px
}
.prose .article-lead {
  font-size:1.1875rem;
  line-height:1.85;
  border-bottom:1px solid var(--line);
  padding-bottom:30px;
  margin-bottom:35px
}
.prose code {
  font-family:var(--mono);
  font-size:.86em;
  background:var(--surface);
  padding:.1em .3em;
  overflow-wrap:anywhere
}
.code-wrap {
  position:relative;
  margin:28px 0;
  background:var(--surface);
  border:1px solid var(--line);
  min-width:0
}
.prose pre {
  padding:46px 22px 22px;
  overflow-x:auto;
  margin:0;
  max-width:100%;
  font-size:15px;
  line-height:1.65;
  tab-size:4
}
.prose pre code {
  padding:0;
  background:none;
  color:inherit;
  font-size:inherit;
  white-space:pre;
  overflow-wrap:normal
}
.copy-code {
  position:absolute;
  top:8px;
  right:12px;
  font-size:.75rem;
  line-height:1.5;
  border:0;
  background:none;
  padding:4px 6px;
  text-decoration:underline;
  text-underline-offset:3px
}
.no-js .copy-code {
  display:none
}
.concept-strip {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border:1px solid var(--ink);
  margin:30px 0
}
.concept-strip>div {
  padding:18px;
  border-right:1px solid var(--ink)
}
.concept-strip>div:last-child {
  border:0
}
.concept-strip small {
  display:block;
  font: .6875rem/1.8 var(--mono);
  color:var(--muted);
  margin-bottom:10px
}
.concept-strip strong {
  font-size:1rem;
  font-weight:650
}
.command-list {
  border-top:1px solid var(--ink);
  margin:25px 0
}
.command-list>div {
  display:grid;
  grid-template-columns:175px 1fr;
  gap:14px;
  padding:20px 0;
  border-bottom:1px solid var(--line);
  font-size:.9375rem
}
.command-list code {
  background:none;
  padding:0
}
.permission-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:15px;
  margin:30px 0
}
.permission-grid>div {
  border-top:3px solid var(--red);
  padding:18px 5px 0
}
.permission-grid strong {
  font: 3rem var(--mono);
  display:block
}
.permission-grid h3 {
  margin:12px 0
}
.permission-grid p {
  font-size:.875rem;
  line-height:1.8
}
.session-flow {
  margin:30px 0
}
.session-flow>div {
  border:1px solid var(--ink);
  padding:22px
}
.session-flow strong {
  font-size:1.1875rem;
  display:block;
  margin:8px 0
}
.session-flow small {
  font-size:.75rem;
  color:var(--muted)
}
.session-flow p {
  font-size:.875rem;
  margin:0
}
.flow-label {
  display:block;
  font-size:.75rem;
  color:var(--muted);
  border-left:1px solid var(--ink);
  padding:8px 18px;
  margin-left:20px
}
.references {
  padding-top:25px;
  border-top:1px solid var(--line);
  margin-top:42px
}
.references h2 {
  font-size:1.2rem
}
.references ol {
  font-size:.875rem;
  padding-left:24px
}
.references li {
  padding:6px 0
}
.references>p {
  font-size:.8125rem;
  color:var(--muted)
}
.table-scroll {
  overflow-x:auto;
  margin:28px 0;
  max-width:100%
}
.prose table {
  border-collapse:collapse;
  min-width:100%;
  font-size:.875rem;
  line-height:1.8
}
.prose th,.prose td {
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid var(--line);
  padding:12px 16px;
  min-width:115px
}
.prose th {
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
  font-weight:650
}
.prose figure {
  margin:32px 0
}
.prose figcaption {
  font-size:.8125rem;
  color:var(--muted);
  line-height:1.8;
  margin-top:12px
}
.prose math[display="block"],.math-display {
  display:block;
  overflow-x:auto;
  max-width:100%;
  margin:30px 0;
  padding:20px 0;
  text-align:center
}
.image-fallback {
  font-size:.8125rem;
  line-height:1.8;
  padding:24px;
  border:1px solid var(--line)
}
.cut-reveal {
  clip-path:inset(0);
  transition:clip-path 500ms ease-out
}
.motion-ready .cut-reveal.pending {
  clip-path:inset(45% 0)
}
.motion-ready .cut-reveal.visible {
  clip-path:inset(0)
}
@media(min-width:1800px) {
  :root {
    --gutter:max(32px,calc((100vw - 1736px)/2))
  }
}
@media(max-width:1050px) {
  .topbar {
    gap:20px
  }
  .nav-actions {
    gap:16px
  }
  .motion {
    padding-left:14px
  }
  .cover-head {
    grid-template-columns:8fr 4fr
  }
  .wordmark {
    font-size:16vw
  }
  .cut-inner {
    grid-template-columns:1fr 2fr;
    gap:25px
  }
  .cut-title {
    font-size:2rem
  }
  .diagram-nodes {
    gap:18px
  }
  .diagram-node {
    padding:12px
  }
  .diagram-node:not(:last-child):after {
    width:18px;
    right:-19px
  }
  .diagram-node strong {
    font-size:.875rem
  }
  .editorial-project {
    grid-template-columns:1fr 1.5fr
  }
  .theme-flow {
    gap:14px
  }
  .candidate-example {
    min-width:165px;
    padding:12px
  }
  .candidate-row {
    font-size:.875rem;
    gap:10px
  }
  .theme-figure,.skills-figure {
    padding:24px
  }
  .work-row,.directory-head {
    grid-template-columns:40px minmax(0,1.3fr) minmax(0,1.4fr) 80px 45px;
    gap:18px
  }
  .article-layout,.case-layout {
    grid-template-columns:170px minmax(0,1fr);
    gap:40px
  }
  .case-heading h1 {
    font-size:3.4rem
  }
  .case-heading {
    grid-template-columns:2fr 1fr
  }
}
@media(max-width:760px) {
  :root {
    --gutter:20px
  }
  .topbar {
    min-height:68px;
    grid-template-columns:1fr auto;
    gap:12px 20px;
    padding-top:14px;
    padding-bottom:12px
  }
  .brand {
    font-size:1.125rem;
    gap:9px
  }
  .brand span:last-child {
    font-size:.6875rem
  }
  .brand-mark {
    width:18px;
    height:20px
  }
  .topbar nav {
    grid-row:2;
    grid-column:1;
    gap:24px
  }
  .topbar nav a {
    padding:8px 0;
    font-size:.8125rem
  }
  .topbar nav a[aria-current="page"]:after {
    bottom:1px
  }
  .nav-actions {
    grid-row:1 / span 2;
    grid-column:2;
    flex-direction:column;
    gap:12px;
    align-items:end
  }
  .search-link {
    font-size:.8125rem
  }
  .motion {
    border:0;
    padding:0;
    font-size:.6875rem
  }
  .cover-head {
    grid-template-columns:1fr;
    gap:24px;
    padding-top:30px;
    padding-bottom:24px
  }
  .wordmark {
    font-size:clamp(70px,20vw,150px);
    letter-spacing:-.04em;
    line-height:.92
  }
  .cover-side {
    display:flex;
    justify-content:space-between;
    gap:20px;
    max-width:none;
    font-size:.75rem;
    padding:0
  }
  .cover-side p {
    margin:0;
    max-width:200px
  }
  .cover-side .mono {
    max-width:105px;
    font-size:.625rem
  }
  .cut-panel {
    padding-top:20px;
    padding-bottom:24px
  }
  .panel-meta {
    font-size:.625rem;
    gap:15px;
    padding-bottom:14px
  }
  .cut-inner {
    grid-template-columns:1fr;
    gap:28px;
    padding-top:24px;
    min-height:0
  }
  .cut-title {
    font-size:1.875rem;
    line-height:1.3
  }
  .cut-title span {
    display:inline
  }
  .cut-title .small {
    font-size:.625rem;
    margin-top:12px;
    display:block
  }
  .diagram-nodes {
    gap:12px
  }
  .diagram-node {
    padding:10px;
    min-height:90px
  }
  .diagram-node small {
    font-size:.625rem;
    line-height:1.5;
    margin-bottom:10px
  }
  .diagram-node strong {
    font-size:.8125rem;
    line-height:1.6
  }
  .diagram-node:not(:last-child):after {
    width:12px;
    right:-13px
  }
  .diagram-note {
    height:24px;
    margin-right:9%;
    margin-left:16%
  }
  .diagram-legend {
    font-size:.6875rem;
    padding-top:11px;
    text-align:left
  }
  .feature-caption {
    grid-template-columns:1fr;
    gap:16px;
    padding-top:22px;
    padding-bottom:26px
  }
  .feature-caption h2 {
    font-size:1.5rem
  }
  .feature-caption .mono {
    margin-bottom:8px
  }
  .feature-caption p {
    font-size:.875rem
  }
  .feature-caption .text-link {
    justify-self:start
  }
  .section {
    padding-top:42px;
    padding-bottom:42px
  }
  .section-label {
    gap:15px;
    align-items:start
  }
  .section-label .mono {
    font-size:.625rem;
    max-width:110px;
    text-align:right
  }
  .eyebrow {
    font-size:.75rem
  }
  .section-title {
    font-size:2.25rem;
    margin:26px 0 22px
  }
  .editorial-project {
    grid-template-columns:1fr;
    gap:25px;
    padding:30px 0
  }
  .project-copy h3 {
    font-size:1.75rem;
    margin:15px 0
  }
  .project-copy p {
    max-width:none;
    font-size:.875rem;
    margin-bottom:18px
  }
  .theme-figure,.skills-figure {
    min-height:280px;
    padding:19px
  }
  .figure-heading {
    font-size:.625rem;
    line-height:1.7
  }
  .theme-flow {
    flex-wrap:wrap;
    gap:16px;
    margin:30px 0
  }
  .color-input {
    font-size:.625rem;
    gap:10px
  }
  .swatch:before {
    width:24px;
    height:24px
  }
  .map-line {
    min-width:20px
  }
  .map-line:after {
    font-size:.625rem
  }
  .candidate-example {
    min-width:140px;
    padding:10px
  }
  .candidate-row {
    font-size:.75rem;
    gap:5px
  }
  .candidate-row b {
    padding:5px 7px
  }
  .candidate-example>span {
    font-size:.625rem
  }
  .figcaption,.diagram-caption {
    font-size:.6875rem
  }
  .skills-lines strong {
    font-size:1.5rem
  }
  .skills-lines span {
    font-size:.625rem
  }
  .writing-row {
    grid-template-columns:30px minmax(0,1fr);
    gap:12px;
    padding:22px 0
  }
  .writing-row h3 {
    font-size:1.25rem;
    line-height:1.5
  }
  .writing-row p {
    font-size:.8125rem
  }
  .writing-row time {
    grid-column:2;
    text-align:left;
    font-size:.6875rem;
    padding-top:0
  }
  .writing-row .mono {
    font-size:.625rem
  }
  .index-callout {
    grid-template-columns:1fr;
    gap:22px;
    padding-top:35px;
    padding-bottom:35px
  }
  .index-callout h2 {
    font-size:2.25rem
  }
  .index-callout>div {
    align-items:start;
    justify-self:start;
    gap:18px
  }
  .index-callout p {
    font-size:.875rem
  }
  .footer {
    flex-wrap:wrap;
    gap:24px
  }
  .footer-links {
    font-size:.75rem;
    gap:20px
  }
  .footer>.mono {
    width:100%
  }
  .page-intro {
    padding-top:36px;
    padding-bottom:30px
  }
  .page-intro h1 {
    font-size:3rem;
    margin-top:18px
  }
  .page-intro>p {
    font-size:.9375rem;
    margin-top:20px
  }
  .directory-head {
    display:none
  }
  .directory {
    padding-top:12px;
    padding-bottom:40px
  }
  .work-row {
    grid-template-columns:25px minmax(0,1fr) 50px;
    gap:12px;
    padding:24px 0
  }
  .work-row h2 {
    font-size:1.25rem
  }
  .work-row p {
    grid-column:2 / -1;
    font-size:.875rem
  }
  .work-row .state {
    grid-column:2;
    grid-row:3;
    font-size:.6875rem
  }
  .work-row>.source-link {
    grid-column:3;
    grid-row:1;
    font-size:.75rem
  }
  .work-row>.mono {
    font-size:.625rem
  }
  .listing-controls {
    gap:12px;
    padding:18px 0
  }
  .listing-controls .count {
    font-size:.6875rem
  }
  .listing-controls label,.listing-controls select {
    font-size:.8125rem
  }
  .listing-controls select {
    padding:8px
  }
  .search-form {
    margin-top:26px
  }
  .search-form input {
    font-size:1rem;
    padding:13px
  }
  .search-form button {
    padding:12px 16px
  }
  .result-row {
    grid-template-columns:45px minmax(0,1fr);
    gap:14px;
    padding:22px 0
  }
  .result-row .kind {
    font-size:.6875rem;
    padding-left:7px
  }
  .result-row h2 {
    font-size:1.125rem;
    overflow-wrap:anywhere
  }
  .result-row p {
    font-size:.8125rem
  }
  .result-row>.mono {
    grid-column:2;
    text-align:left
  }
  .case-heading {
    grid-template-columns:1fr;
    gap:24px;
    padding-top:32px;
    padding-bottom:30px
  }
  .case-heading h1 {
    font-size:2.5rem;
    line-height:1.18
  }
  .case-heading p {
    font-size:.9375rem
  }
  .case-heading>aside {
    border-top:1px solid var(--line);
    padding-top:20px
  }
  .case-visual {
    margin:20px var(--gutter) 0;
    padding:20px
  }
  .case-visual .cut-inner {
    min-height:0
  }
  .case-visual .cut-title {
    font-size:1.5rem
  }
  .case-visual .diagram-nodes {
    gap:10px
  }
  .case-visual .diagram-node {
    padding:8px
  }
  .case-visual .diagram-node:not(:last-child):after {
    width:10px;
    right:-11px
  }
  .case-visual .theme-figure,.case-visual .skills-figure {
    padding:14px
  }
  .case-visual .theme-flow {
    flex-direction:column;
    align-items:start
  }
  .case-visual .map-line {
    width:100%;
    margin:10px 0
  }
  .case-layout,.article-layout {
    grid-template-columns:1fr;
    padding-top:28px;
    padding-bottom:44px;
    gap:32px
  }
  .local-toc,.article-toc {
    position:static
  }
  .local-toc nav {
    flex-direction:row;
    flex-wrap:wrap;
    gap:12px 20px
  }
  .local-toc {
    padding-bottom:24px;
    border-bottom:1px solid var(--line)
  }
  .local-toc a {
    font-size:.8125rem
  }
  .prose {
    font-size:17px;
    line-height:1.8;
    max-width:100%
  }
  .prose h2 {
    font-size:1.45rem;
    margin-top:36px
  }
  .heading-anchor {
    opacity:1;
    font-size:.75rem
  }
  .prose .article-lead {
    font-size:1.1rem
  }
  .article-heading {
    padding-top:30px;
    padding-bottom:28px
  }
  .article-heading h1 {
    font-size:2.35rem;
    line-height:1.35;
    margin:22px 0
  }
  .article-heading .article-meta {
    gap:10px 16px;
    font-size:.6875rem
  }
  .article-heading .deck {
    font-size:1rem
  }
  .article-toc nav {
    gap:12px
  }
  .concept-strip {
    grid-template-columns:1fr
  }
  .concept-strip>div {
    border-right:0;
    border-bottom:1px solid var(--ink);
    display:flex;
    gap:20px;
    align-items:center
  }
  .concept-strip small {
    margin:0;
    min-width:100px
  }
  .command-list>div {
    grid-template-columns:1fr;
    gap:8px
  }
  .permission-grid {
    grid-template-columns:1fr;
    gap:18px
  }
  .permission-grid>div {
    display:grid;
    grid-template-columns:40px 1fr;
    gap:8px 16px
  }
  .permission-grid strong {
    grid-row:span 2;
    font-size:2.5rem
  }
  .permission-grid h3,.permission-grid p {
    margin:0
  }
  .permission-grid p {
    font-size:.875rem
  }
  .prose pre {
    font-size:15px;
    padding-left:16px;
    padding-right:16px
  }
  .motion-ready .cut-reveal.pending {
    clip-path:none
  }
  .prose th,.prose td {
    padding:10px 12px
  }
  .related-item p {
    font-size:.8125rem
  }
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
.reset-search {
  font-size:.875rem;
  background:transparent;
  border:1px solid var(--ink);
  padding:12px 18px;
  margin-top:18px
}
.wordmark {
  position:relative;
  color:transparent
}
.wordmark::before,.wordmark::after {
  content:attr(data-wordmark);
  position:absolute;
  inset:0;
  color:var(--ink);
  pointer-events:none
}
.wordmark::before {
  clip-path:inset(0 0 50% 0);
  transform:translateX(var(--slice-shift,0px))
}
.wordmark::after {
  clip-path:inset(50% 0 0 0);
  transform:translateX(calc(-1 * var(--slice-shift,0px)))
}
@media(max-width:760px) {
  .wordmark::before,.wordmark::after {
    transform:none!important
  }
}

html[lang="en"] .map-line::after { content:'Template mapping'; }

/* Editorial taxonomies: real links work without scripts; filters enhance the full directory. */
.writing-row h3 a {
  text-decoration:none
}
.writing-row h3 a:hover {
  text-decoration:underline;
  text-decoration-thickness:1px
}
.note-taxonomy {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 14px;
  margin-top:18px;
  font-size:11px;
  line-height:1.7
}
.note-taxonomy a {
  text-decoration:none
}
.note-taxonomy a:hover {
  text-decoration:underline
}
.category-link {
  font-weight:650;
  color:var(--accent-text)
}
.tag-link {
  color:var(--muted)
}
.tag-link::before {
  content:'#';
  margin-right:3px;
  opacity:.6
}
.writing-preview .category-link {
  color:var(--accent-text)
}
.writing-preview .tag-link {
  color:var(--muted)
}
.writing-preview .note-taxonomy {
  font-size:11px
}
.writing-navigation {
  display:flex;
  gap:28px;
  flex-wrap:wrap;
  margin-top:28px;
  font-size:13px
}
.writing-navigation a {
  text-decoration:none;
  padding:8px 0;
  border-bottom:2px solid transparent
}
.writing-navigation [aria-current="page"] {
  border-color:var(--red);
  font-weight:650
}
.category-navigation {
  display:flex;
  flex-wrap:wrap;
  gap:12px 28px;
  padding-top:22px;
  font-size:12px
}
.category-navigation a {
  text-decoration:none;
  display:flex;
  gap:12px;
  align-items:center
}
.category-navigation span {
  font:10px var(--mono);
  color:var(--muted)
}
.category-navigation [aria-current="page"] {
  color:var(--accent-text);
  font-weight:650
}
.writing-intro {
  padding-bottom:30px
}
.writing-filters {
  display:flex;
  gap:20px;
  align-items:end;
  flex-wrap:wrap;
  padding:24px 0;
  border-bottom:1px solid var(--line)
}
.writing-filters>div {
  min-width:150px;
  flex:1
}
.writing-filters>div:nth-child(3) {
  flex:1.5
}
.writing-filters label {
  display:block;
  font-size:11px;
  margin-bottom:9px;
  color:var(--muted)
}
.writing-filters select {
  width:100%;
  max-width:100%;
  min-width:0;
  font-size:13px;
  padding:12px 28px 12px 12px;
  background:transparent;
  border:1px solid var(--line);
  border-radius:0
}
.writing-filters button {
  background:transparent;
  border:0;
  border-bottom:1px solid var(--ink);
  font-size:12px;
  padding:12px 0;
  white-space:nowrap
}
.no-js .writing-filters {
  display:none
}
.writing-list-status {
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
  padding:20px 0;
  font-size:12px
}
.writing-list-status>span {
  color:var(--muted)
}
.writing-list-status a {
  font-size:12px
}
.light-list .writing-row .note-taxonomy {
  margin-top:15px
}
#empty-reset-writing {
  font-size:13px;
  background:transparent;
  border:1px solid var(--ink);
  padding:12px 18px;
  margin-top:18px
}
.tag-directory {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0 36px;
  padding-top:20px;
  padding-bottom:70px
}
.tag-directory a {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:20px;
  padding:25px 0;
  border-bottom:1px solid var(--line);
  text-decoration:none;
  font-size:23px
}
.tag-directory a:hover span {
  color:var(--accent-text)
}
.tag-directory b {
  font:11px var(--mono);
  color:var(--muted)
}
.topics-intro {
  position:relative
}
.topics-count {
  display:block;
  margin-top:24px;
  font:11px var(--mono);
  color:var(--muted)
}
.topics-directory {
  padding-bottom:65px
}
.topic-row {
  display:grid;
  grid-template-columns:1.2fr 5fr 4fr;
  gap:50px;
  padding:45px 0;
  border-bottom:1px solid var(--ink)
}
.topic-number {
  position:relative;
  align-self:start;
  font:700 70px/.95 var(--display);
  letter-spacing:-.08em;
  color:transparent;
  -webkit-text-stroke:1px var(--ink)
}
.topic-number i {
  position:absolute;
  top:52%;
  left:0;
  width:76px;
  height:5px;
  background:var(--red);
  transform:rotate(-14deg)
}
.topic-row-copy .eyebrow {
  font-size:10px;
  color:var(--accent-text)
}
.topic-row-copy h2 {
  font-size:clamp(24px,2.7vw,40px);
  line-height:1.4;
  letter-spacing:-.03em;
  margin:15px 0
}
.topic-row-copy h2 a {
  text-decoration:none
}
.topic-row-copy p {
  font-size:14px;
  line-height:1.9;
  color:var(--muted);
  max-width:520px
}
.topic-row-copy>.text-link {
  margin-top:24px;
  font-size:12px
}
.topic-chapters {
  list-style:none;
  margin:0;
  padding:0;
  counter-reset:chapter
}
.topic-chapters li {
  counter-increment:chapter;
  display:grid;
  grid-template-columns:20px 1fr;
  gap:16px;
  padding:15px 0;
  border-bottom:1px solid var(--line);
  font-size:13px;
  line-height:1.8
}
.topic-chapters li::before {
  content:counter(chapter,decimal-leading-zero);
  font:10px/2.4 var(--mono);
  color:var(--accent-text)
}
.topic-chapters a {
  text-decoration:none
}
.topic-chapters a:hover {
  text-decoration:underline
}
.topic-hero {
  display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:48px;
  background:var(--surface);
  overflow:hidden;
  padding-top:30px;
  padding-bottom:48px;
  border-bottom:1px solid var(--ink)
}
.topic-hero-copy {
  position:relative;
  z-index:1
}
.topic-hero .back-link {
  font-size:12px
}
.topic-hero .eyebrow {
  margin-top:55px;
  color:var(--accent-text);
  font-size:10px
}
.topic-hero h1 {
  font-size:clamp(38px,4.6vw,70px);
  line-height:1.3;
  letter-spacing:-.04em;
  margin:20px 0 22px;
  max-width:800px
}
.topic-deck {
  font-size:17px;
  line-height:1.9;
  max-width:650px;
  color:var(--muted)
}
.topic-hero .text-link {
  margin-top:30px;
  font-size:13px
}
.topic-cover-art {
  position:relative;
  align-self:stretch;
  min-height:300px;
  display:flex;
  align-items:center;
  justify-content:center
}
.topic-cover-art>span {
  font:750 clamp(150px,23vw,340px)/.8 var(--display);
  letter-spacing:-.1em;
  -webkit-text-stroke:1px #bc43295c;
  color:transparent
}
.topic-cover-art>i {
  position:absolute;
  width:120%;
  height:12px;
  background:var(--red);
  transform:rotate(-17deg);
  left:0;
  top:48%
}
.topic-cover-art>i:nth-of-type(2) {
  height:1px;
  top:39%
}
.topic-cover-art>i:nth-of-type(3) {
  height:1px;
  top:61%
}
.topic-cover-art b {
  position:absolute;
  bottom:5px;
  right:0;
  font:9px var(--mono);
  letter-spacing:.16em;
  color:var(--accent-text)
}
.topic-introduction {
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:60px;
  padding-top:44px;
  padding-bottom:44px;
  border-bottom:1px solid var(--line)
}
.topic-introduction h2 {
  font-size:22px;
  line-height:1.6
}
.topic-introduction p {
  max-width:760px;
  font-size:16px;
  line-height:1.95
}
.topic-reading>ol {
  list-style:none;
  margin:0;
  padding:0
}
.path-chapter {
  display:grid;
  grid-template-columns:1fr 5fr;
  gap:40px;
  padding:44px 0;
  border-bottom:1px solid var(--line)
}
.path-step {
  font:550 50px/1 var(--display);
  color:var(--accent-text)
}
.path-chapter>div {
  max-width:850px
}
.path-chapter .path-guide {
  font-size:12px;
  color:var(--accent-text);
  line-height:1.9
}
.path-chapter h2 {
  font-size:clamp(24px,3vw,38px);
  margin:16px 0;
  line-height:1.4
}
.path-chapter h2 a {
  text-decoration:none
}
.path-chapter p {
  font-size:15px;
  line-height:1.9;
  color:var(--muted)
}
.path-chapter .text-link {
  margin-top:23px;
  font-size:12px
}
.topic-exit {
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding-top:32px;
  padding-bottom:45px;
  font-size:13px
}
.article-cover-copy .note-taxonomy {
  margin-top:23px;
  font-size:11px
}
.article-topic-links {
  display:flex;
  gap:8px 16px;
  flex-wrap:wrap;
  line-height:1.8;
  font-size:12px;
  margin-top:18px
}
.article-topic-links>span {
  color:var(--muted)
}
.article-topic-links>a {
  color:var(--accent-text)
}
.series-reading {
  border-top:1px solid var(--line);
  margin-top:42px;
  padding-top:28px
}
.reading-page .series-reading h2 {
  font-size:20px;
  margin:0 0 22px
}
.series-reading h3 {
  font-size:17px;
  font-weight:550
}
.series-reading ol {
  padding:0;
  list-style:none
}
.series-reading li {
  border-bottom:1px solid var(--line);
  padding:14px 0;
  font-size:14px
}
.series-reading li a {
  display:flex;
  gap:16px;
  text-decoration:none
}
.series-reading li span {
  font:11px/2 var(--mono);
  color:var(--muted)
}
.series-reading [aria-current="page"] {
  color:var(--accent-text);
  font-weight:600
}
.series-reading [aria-current="page"]::after {
  content:'正在阅读';
  font-size:10px;
  white-space:nowrap;
  font-weight:400;
  margin-left:auto;
  align-self:center
}
@media(max-width:1050px) {
  .topic-row {
    grid-template-columns:72px minmax(0,1fr);
    gap:30px
  }
  .topic-chapters {
    grid-column:2
  }
  .tag-directory {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .topic-hero {
    gap:15px
  }
  .topic-introduction {
    gap:30px
  }
}
@media(max-width:760px) {
  .topbar nav {
    gap:22px
  }
  .writing-navigation {
    gap:23px;
    margin-top:22px;
    font-size:12px
  }
  .category-navigation {
    gap:15px 23px;
    padding-top:20px;
    font-size:11px
  }
  .writing-intro {
    padding-bottom:23px
  }
  .writing-filters {
    gap:16px 12px;
    padding:18px 0
  }
  .writing-filters>div {
    min-width:0;
    flex:1 1 calc(50% - 12px)
  }
  .writing-filters>div:nth-child(3) {
    flex:1 1 75%
  }
  .writing-filters button {
    font-size:11px
  }
  .writing-filters select {
    font-size:12px;
    padding:11px 20px 11px 10px
  }
  .writing-list-status {
    font-size:11px;
    padding:18px 0
  }
  .writing-list-status a {
    font-size:11px
  }
  .note-taxonomy {
    gap:6px 12px;
    font-size:10px
  }
  .tag-directory {
    gap:0 20px;
    padding-bottom:45px
  }
  .tag-directory a {
    font-size:17px;
    padding:20px 0
  }
  .topics-directory {
    padding-bottom:40px
  }
  .topic-row {
    grid-template-columns:40px minmax(0,1fr);
    gap:18px;
    padding:30px 0
  }
  .topic-number {
    font-size:43px
  }
  .topic-number i {
    width:43px;
    height:4px
  }
  .topic-row-copy h2 {
    font-size:25px;
    margin-top:12px
  }
  .topic-row-copy p {
    font-size:13px
  }
  .topic-chapters {
    grid-column:2
  }
  .topic-chapters li {
    font-size:12px;
    gap:10px
  }
  .topic-row-copy>.text-link {
    margin-top:20px
  }
  .topic-hero {
    position:relative;
    display:block;
    padding-top:25px;
    padding-bottom:34px
  }
  .topic-hero .eyebrow {
    margin-top:35px
  }
  .topic-hero h1 {
    font-size:37px;
    line-height:1.4
  }
  .topic-deck {
    font-size:14px
  }
  .topic-cover-art {
    position:absolute;
    right:-150px;
    bottom:0;
    width:350px;
    height:300px;
    opacity:.16;
    pointer-events:none
  }
  .topic-cover-art>span {
    font-size:250px
  }
  .topic-cover-art b {
    display:none
  }
  .topic-introduction {
    display:block;
    padding-top:30px;
    padding-bottom:30px
  }
  .topic-introduction h2 {
    font-size:20px;
    margin-bottom:16px
  }
  .topic-introduction p {
    font-size:14px
  }
  .path-chapter {
    grid-template-columns:30px minmax(0,1fr);
    gap:18px;
    padding:30px 0
  }
  .path-step {
    font-size:30px
  }
  .path-chapter h2 {
    font-size:24px
  }
  .path-chapter p {
    font-size:13px
  }
  .path-chapter .path-guide {
    font-size:11px
  }
  .topic-exit {
    font-size:11px;
    padding-top:28px;
    padding-bottom:30px
  }
  .article-cover-copy .note-taxonomy {
    font-size:10px
  }
  .article-topic-links {
    font-size:11px
  }
  .series-reading li {
    font-size:13px
  }
  .series-reading [aria-current="page"]::after {
    display:none
  }
}

html[lang="en"] .series-reading [aria-current="page"]::after { content:'READING NOW'; }

/* Cases retain dark exhibit panels inside adaptive editorial surfaces. */
.reading-progress {
  position:fixed;
  top:var(--topbar-height,76px);
  height:3px;
  left:0;
  right:0;
  z-index:30;
  pointer-events:none
}
.reading-progress i {
  display:block;
  height:100%;
  width:var(--read-progress,0%);
  background:#ff4d2e
}
.case-hero {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:#111214;
  color:#f1efe9;
  padding:32px var(--gutter) 0;
  min-height:700px
}
.case-back {
  font-size:12px;
  text-decoration:none;
  color:#bcb8af;
  position:relative;
  z-index:2
}
.case-hero-copy {
  position:relative;
  z-index:2;
  max-width:850px;
  padding:65px 0 54px
}
.case-kicker {
  font:10px/1.6 var(--mono);
  letter-spacing:.12em;
  color:#ff6742
}
.case-repo-name {
  font:500 18px/1.5 var(--display);
  letter-spacing:.01em;
  color:#bcb8af;
  margin-top:23px
}
.case-hero h1 {
  font-size:clamp(58px,7.4vw,118px);
  font-weight:750;
  line-height:1.08;
  letter-spacing:-.045em;
  margin-top:17px
}
.case-deck {
  font-size:16px;
  line-height:1.85;
  max-width:540px;
  margin-top:30px;
  color:#c5c1b7
}
.case-hero-links {
  display:flex;
  gap:32px;
  align-items:center;
  margin-top:35px;
  font-size:12px
}
.case-hero-links a {
  text-decoration:none;
  padding-bottom:9px;
  border-bottom:1px solid #ffffff50
}
.case-hero-links a:first-child {
  color:#ff6742;
  border-color:#ff4d2e
}
.case-hero-links span {
  margin-left:22px
}
.case-hero-footer {
  border-top:1px solid #ffffff25;
  display:flex;
  justify-content:space-between;
  gap:30px;
  padding:21px 0;
  font:10px/1.6 var(--mono);
  color:#aba79e;
  position:relative;
  z-index:2
}
.case-orbital-art {
  position:absolute;
  right:0;
  top:20px;
  width:49%;
  height:640px;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:0;
  background:radial-gradient(ellipse at center,#ff4d2e0c,transparent 65%)
}
.case-orbital-art img {
  width:93%;
  height:auto;
  max-width:650px;
  opacity:.8
}
.case-orbital-art>span {
  position:absolute;
  right:32px;
  bottom:85px;
  font:10px var(--mono);
  letter-spacing:.2em;
  color:#ff6742
}
.case-orbital-ring {
  position:absolute;
  width:145%;
  height:43%;
  border:1px solid #ff4d2e42;
  border-radius:50%;
  rotate:-24deg
}
.case-orbital-ring:before {
  content:'';
  position:absolute;
  inset:-70px 50px;
  border:1px solid #f1efe919;
  border-radius:50%;
  rotate:36deg
}
.case-detail {
  max-width:1550px;
  margin:auto;
  scroll-margin-top:calc(var(--topbar-height,76px) + 24px)
}
.case-premise {
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:60px;
  padding:52px var(--gutter);
  border-bottom:1px solid var(--line)
}
.case-premise>span {
  font:11px var(--mono);
  letter-spacing:.08em;
  padding-top:8px;
  color:var(--muted)
}
.case-premise p {
  font-size:clamp(20px,2vw,28px);
  line-height:1.7;
  max-width:860px;
  letter-spacing:-.015em
}
.case-lab {
  background:#17191c;
  color:#f1efe9;
  margin:42px var(--gutter) 0;
  padding:34px 38px
}
.lab-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:25px;
  margin-bottom:28px
}
.lab-heading h2 {
  font-size:24px;
  font-weight:600
}
.lab-heading>span {
  font-size:10px;
  color:#aaa79f;
  line-height:1.7
}
.scenario-controls {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  border:0;
  padding:0;
  margin:0 0 28px
}
.scenario-controls label {
  position:relative;
  font-size:12px;
  cursor:pointer
}
.scenario-controls input {
  position:absolute;
  opacity:0;
  width:1px;
  height:1px
}
.scenario-controls label>span {
  display:block;
  padding:11px 16px;
  border:1px solid #ffffff38
}
.scenario-controls input:checked+span {
  background:#ff4d2e;
  border-color:#ff4d2e;
  color:#111214
}
.scenario-controls input:focus-visible+span {
  outline:2px solid #f1efe9;
  outline-offset:4px
}
.flow-nodes {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px
}
.flow-node {
  border-top:1px solid #ffffff68;
  padding:20px 5px 25px;
  position:relative
}
.flow-node>span {
  display:block;
  font:11px var(--mono);
  color:#ff6742;
  margin-bottom:22px
}
.flow-node>strong {
  font-size:19px;
  font-weight:550;
  line-height:1.7
}
.flow-node:not(:last-child):after {
  content:'↗';
  position:absolute;
  right:0;
  top:18px;
  color:#ff6742;
  font-size:17px
}
.scenario-panel>p {
  font-size:13px;
  line-height:1.9;
  color:#c2beb3;
  max-width:820px;
  margin:12px 0 18px
}
.scenario-panel>a {
  font-size:11px;
  color:#f1efe9;
  text-underline-offset:5px
}
.lab-footnote {
  font-size:10px;
  color:#98958d;
  margin-top:28px;
  border-top:1px solid #ffffff22;
  padding-top:18px;
  line-height:1.8
}
.no-js .scenario-controls {
  display:none
}
.no-js .scenario-panel[hidden] {
  display:block!important;
  border-top:1px solid #ffffff33;
  padding-top:26px;
  margin-top:26px
}
.general-lab {
  background:#ff4d2e;
  color:#111214
}
.general-lab .lab-heading>span {
  color:#35211a
}
.general-lab .theme-figure,.general-lab .skills-figure {
  max-width:950px;
  margin:0 auto
}
.general-lab .system-diagram {
  padding-top:5px;
  padding-bottom:12px
}
.case-page .case-layout {
  max-width:1200px;
  grid-template-columns:190px minmax(0,740px);
  gap:75px;
  padding-top:65px;
  padding-bottom:90px
}
.case-page .prose {
  max-width:none;
  line-height:1.95
}
.case-page .prose>section[data-reading-section] {
  margin-bottom:60px
}
.case-page .section-index {
  font:10px/1.5 var(--mono);
  letter-spacing:.12em;
  color:var(--accent-text);
  margin-bottom:14px
}
.case-page .prose>section>h2 {
  margin-top:0;
  font-size:30px;
  margin-bottom:22px
}
.case-page .prose p {
  font-size:17px
}
.case-page .limitations {
  padding:23px 26px;
  background:var(--surface);
  border:0;
  margin:0 0 60px
}
.case-page .limitations p {
  font-size:14px;
  margin-bottom:0
}
.case-page .limitations h3 {
  font-size:15px
}
.reading-status {
  font:10px/1.5 var(--mono);
  margin-top:36px;
  padding-top:20px;
  border-top:1px solid var(--line);
  color:var(--muted);
  display:flex;
  justify-content:space-between
}
.reading-status span {
  color:var(--accent-text)
}
.toc-return {
  display:inline-block;
  margin-top:20px;
  font-size:11px!important;
  color:var(--muted)
}
.local-toc a[aria-current="location"],.article-toc a[aria-current="location"] {
  color:var(--accent-text);
  font-weight:650
}
.local-toc a[aria-current="location"] span,.article-toc a[aria-current="location"] span {
  color:var(--accent-text)
}
.case-code {
  margin:32px 0!important
}
.case-code>figcaption {
  margin:0!important;
  padding:13px 18px;
  background:#232528;
  color:#c3bfb4;
  font:10px/1.8 var(--mono);
  display:flex;
  justify-content:space-between;
  gap:18px
}
.case-code>figcaption a {
  color:#c3bfb4;
  font-size:10px
}
.case-code .code-wrap {
  margin:0;
  background:#17191c;
  border:0;
  color:#f1efe9
}
.case-code pre {
  font-size:13px;
  padding-top:45px;
  line-height:1.9
}
.case-code .copy-code {
  color:#c3bfb4
}
.case-code .code-caption {
  font-size:11px!important;
  color:var(--muted);
  margin:12px 0 0
}
.case-page .evidence-list {
  font-size:14px
}
.case-page .evidence-list li {
  line-height:1.9;
  padding:8px 0
}
.next-orbit {
  display:flex;
  gap:40px;
  align-items:center;
  justify-content:space-between;
  padding:45px var(--gutter);
  background:#111214;
  color:#f1efe9;
  text-decoration:none;
  overflow:hidden
}
.next-orbit>div>span {
  font:10px var(--mono);
  color:#ff6742;
  letter-spacing:.12em
}
.next-orbit strong {
  display:block;
  font:650 clamp(24px,3vw,48px)/1.35 var(--display);
  margin-top:20px
}
.next-orbit p {
  color:#aaa79f;
  font-size:12px;
  margin-top:15px
}
.next-orbit img {
  width:150px;
  height:150px;
  margin-left:auto;
  transition:rotate .6s,scale .6s
}
.next-orbit>b {
  font-size:36px;
  color:#ff4d2e;
  font-weight:400
}
.next-orbit:hover img {
  rotate:12deg;
  scale:1.1
}
@media(max-width:900px) {
  .case-hero {
    min-height:640px
  }
  .case-hero-copy {
    padding-top:48px
  }
  .case-orbital-art {
    width:58%;
    right:-16%;
    top:45px;
    opacity:.45
  }
  .case-hero h1 {
    font-size:76px
  }
  .case-premise {
    grid-template-columns:1fr;
    gap:20px
  }
  .case-page .case-layout {
    grid-template-columns:160px minmax(0,1fr);
    gap:35px
  }
  .case-lab {
    padding:27px
  }
  .lab-heading {
    align-items:start
  }
  .flow-node>strong {
    font-size:16px
  }
}
@media(max-width:760px) {
  .case-hero {
    padding-top:24px;
    min-height:0
  }
  .case-hero-copy {
    padding-top:54px;
    padding-bottom:40px
  }
  .case-repo-name {
    font-size:15px
  }
  .case-hero h1 {
    font-size:clamp(50px,12vw,78px);
    margin-top:20px
  }
  .case-deck {
    font-size:14px;
    max-width:330px;
    margin-top:28px
  }
  .case-orbital-art {
    top:48px;
    width:83%;
    right:-27%;
    height:360px;
    opacity:.48
  }
  .case-orbital-art>span {
    display:none
  }
  .case-hero-links {
    gap:28px;
    font-size:11px
  }
  .case-hero-links span {
    margin-left:10px
  }
  .case-hero-footer {
    font-size:8px;
    gap:20px
  }
  .case-hero-footer>span {
    max-width:50%
  }
  .case-back {
    font-size:11px
  }
  .case-premise {
    padding-top:32px;
    padding-bottom:32px;
    gap:17px
  }
  .case-premise p {
    font-size:19px
  }
  .case-premise>span {
    font-size:9px
  }
  .case-lab {
    padding:24px 20px;
    margin-top:25px
  }
  .lab-heading {
    display:block
  }
  .lab-heading h2 {
    font-size:20px
  }
  .lab-heading>span {
    display:block;
    margin-top:12px;
    font-size:9px
  }
  .scenario-controls {
    gap:7px
  }
  .scenario-controls label {
    font-size:10px
  }
  .scenario-controls label>span {
    padding:9px 10px
  }
  .flow-nodes {
    grid-template-columns:1fr;
    gap:0
  }
  .flow-node {
    display:flex;
    align-items:baseline;
    gap:18px;
    padding:16px 0
  }
  .flow-node>span {
    margin:0;
    font-size:10px
  }
  .flow-node>strong {
    font-size:15px;
    max-width:83%
  }
  .flow-node:not(:last-child):after {
    font-size:13px;
    content:'↓'
  }
  .scenario-panel>p {
    font-size:12px;
    margin-top:20px
  }
  .lab-footnote {
    font-size:9px
  }
  .case-page .case-layout {
    display:block;
    padding-top:35px;
    padding-bottom:50px
  }
  .case-page .local-toc {
    margin-bottom:34px
  }
  .local-toc .reading-status,.local-toc .toc-return {
    display:none
  }
  .case-page .prose p {
    font-size:16px
  }
  .case-page .prose>section[data-reading-section] {
    margin-bottom:42px
  }
  .case-page .prose>section>h2 {
    font-size:26px
  }
  .case-page .limitations {
    padding:20px;
    margin-bottom:42px
  }
  .case-code pre {
    font-size:12px;
    padding:45px 15px 20px
  }
  .case-code>figcaption {
    padding:11px 15px;
    font-size:9px
  }
  .next-orbit {
    gap:18px;
    padding-top:32px;
    padding-bottom:32px
  }
  .next-orbit>div>span {
    font-size:8px
  }
  .next-orbit strong {
    font-size:23px;
    overflow-wrap:anywhere
  }
  .next-orbit img {
    width:80px;
    height:80px
  }
  .next-orbit>b {
    font-size:23px
  }
  .next-orbit p {
    font-size:11px
  }
  .next-orbit>div {
    max-width:65%
  }
}
/* Field notes: a numbered paper cover and a restrained reading column. */
.reading-page .article-heading {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding-top:30px;
  padding-bottom:0;
  background:var(--surface);
  border:0
}
.article-masthead {
  display:flex;
  gap:24px;
  justify-content:space-between;
  align-items:baseline;
  border-bottom:1px solid var(--line);
  padding-bottom:24px;
  font:10px/1.6 var(--mono);
  letter-spacing:.07em
}
.article-masthead .back-link {
  margin:0;
  font-size:11px;
  text-decoration:none;
  letter-spacing:0
}
.article-masthead>span:last-child {
  color:var(--accent-text)
}
.article-cover-copy {
  position:relative;
  z-index:2;
  max-width:1030px;
  padding:55px 0 52px
}
.reading-page .article-meta {
  font-size:10px;
  letter-spacing:.08em;
  color:var(--accent-text)
}
.reading-page .article-heading h1 {
  max-width:1000px;
  font-size:clamp(44px,5.1vw,80px);
  line-height:1.3;
  letter-spacing:-.045em;
  margin:23px 0;
  font-weight:750;
  text-wrap:balance
}
.reading-page .article-heading .deck {
  font-size:18px;
  line-height:1.8;
  color:var(--muted);
  max-width:680px
}
.article-folio {
  position:absolute;
  right:-12px;
  bottom:63px;
  z-index:0;
  color:#bb422b1a;
  pointer-events:none
}
.article-folio>span {
  font:650 clamp(190px,25vw,370px)/.85 var(--display);
  letter-spacing:-.08em;
  -webkit-text-stroke:1px #c548303d;
  color:transparent
}
.article-folio>i {
  position:absolute;
  height:15px;
  background:#ff4d2e;
  left:14%;
  right:0;
  top:55%;
  transform:rotate(-13deg);
  opacity:.58
}
.article-folio>b {
  position:absolute;
  bottom:-24px;
  right:45px;
  font:9px var(--mono);
  color:var(--accent-text);
  letter-spacing:.17em
}
.article-cover-footer {
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  gap:25px;
  border-top:1px solid var(--line);
  padding:20px 0;
  font:10px/1.7 var(--mono);
  color:var(--muted)
}
.article-cover-footer>a {
  margin-left:auto;
  color:var(--ink);
  text-decoration:none
}
.article-cover-footer>a>span {
  margin-left:28px;
  color:var(--accent-text)
}
.reading-page .article-layout {
  padding-top:60px;
  padding-bottom:70px;
  grid-template-columns:190px minmax(0,740px);
  gap:75px
}
.reading-page .article-toc summary {
  font:10px/1.8 var(--mono);
  letter-spacing:.03em
}
.reading-page .article-toc nav {
  gap:18px
}
.reading-page .article-toc nav a {
  font-size:12px
}
.reading-page .article-toc .reading-status>span {
  margin:0;
  color:var(--accent-text)
}
@media(min-width:761px) {
  .reading-page .article-toc {
    max-height:calc(100dvh - 132px);
    overflow-y:auto;
    scrollbar-width:thin;
    padding-right:8px
  }
}
.reading-page .prose {
  max-width:none;
  font-size:17px;
  line-height:1.95
}
.reading-page .prose h2 {
  font-size:28px;
  margin-top:54px;
  margin-bottom:24px;
  line-height:1.5;
  letter-spacing:-.025em
}
.reading-page .prose .article-lead {
  font-size:21px;
  line-height:1.9;
  padding-bottom:34px;
  margin-bottom:38px
}
.reading-page .prose blockquote {
  margin:32px 0;
  padding:23px 26px;
  background:var(--surface);
  font-size:19px;
  line-height:1.8;
  font-weight:550
}
.reading-page .code-wrap {
  background:#17191c;
  border:0;
  color:#f1efe9
}
.reading-page .copy-code {
  color:#d2ccc0;
  top:12px
}
.code-label {
  position:absolute;
  left:21px;
  top:17px;
  font:9px/1.4 var(--mono);
  letter-spacing:.13em;
  color:#ff795a
}
.reading-page .prose pre {
  font-size:13px;
  line-height:1.9;
  padding-top:48px;
  padding-bottom:23px
}
.reading-page .concept-strip {
  background:#17191c;
  color:#f1efe9;
  border:0
}
.reading-page .concept-strip>div {
  border-color:#ffffff35;
  padding:24px 18px
}
.reading-page .concept-strip small {
  color:#ff795a;
  font-size:9px
}
.reading-page .concept-strip strong {
  font-weight:500;
  font-size:17px
}
.reading-page .permission-grid>div {
  border-top-width:2px
}
.reading-page .permission-grid strong {
  color:var(--accent-text);
  font-size:58px
}
.reading-page .permission-grid h3 {
  font-size:18px
}
.reading-page .session-flow>div {
  background:var(--surface);
  border:0;
  border-left:2px solid var(--accent-text);
  padding:23px 27px
}
.reading-page .session-flow small {
  font:10px var(--mono);
  color:var(--accent-text)
}
.reading-page .session-flow strong {
  font-size:21px
}
.reading-page .flow-label {
  font-size:11px;
  border-color:var(--accent-text);
  color:var(--muted)
}
.reading-page .references h2,.reading-page .related h2 {
  font-size:19px;
  margin-top:0
}
.reading-page .references {
  margin-top:60px
}
.reading-page .references li {
  font-size:13px;
  padding:7px 0
}
.next-note {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:45px;
  overflow:hidden;
  background:#ff4d2e;
  padding:48px var(--gutter);
  text-decoration:none;
  color:#17191c
}
.next-note>div {
  position:relative;
  z-index:1;
  max-width:1000px
}
.next-note>div>span {
  font:10px var(--mono);
  letter-spacing:.09em
}
.next-note strong {
  display:block;
  font-size:clamp(24px,3.1vw,46px);
  line-height:1.4;
  letter-spacing:-.025em;
  margin-top:20px;
  font-weight:650
}
.next-note p {
  font-size:13px;
  line-height:1.8;
  margin-top:16px
}
.next-note-number {
  position:absolute;
  right:70px;
  bottom:-45px;
  font:700 220px/1 var(--display);
  opacity:.12;
  letter-spacing:-.08em
}
.next-note>b {
  position:relative;
  z-index:1;
  font-size:36px;
  font-weight:400;
  transition:transform .25s
}
.next-note:hover>b {
  transform:translate(5px,-5px)
}
@media(min-width:1700px) {
  .article-cover-copy {
    max-width:1200px
  }
  .reading-page .article-heading h1 {
    max-width:1200px
  }
}
@media(max-width:1050px) {
  .reading-page .article-layout {
    grid-template-columns:170px minmax(0,1fr);
    gap:40px
  }
  .article-folio {
    opacity:.65;
    right:-45px
  }
  .article-cover-copy {
    max-width:900px
  }
  .reading-page .article-heading h1 {
    max-width:900px
  }
}
@media(max-width:760px) {
  .reading-page .article-heading {
    padding-top:24px
  }
  .article-masthead {
    font-size:8px;
    gap:15px;
    padding-bottom:20px
  }
  .article-masthead>span:nth-child(2) {
    display:none
  }
  .article-masthead .back-link {
    font-size:11px
  }
  .article-cover-copy {
    padding:38px 0 36px
  }
  .reading-page .article-meta {
    font-size:9px;
    gap:12px
  }
  .reading-page .article-heading h1 {
    font-size:clamp(34px,8.5vw,53px);
    line-height:1.4;
    margin:22px 0 20px
  }
  .reading-page .article-heading .deck {
    font-size:14px;
    line-height:1.9
  }
  .article-folio {
    bottom:69px;
    right:-18px;
    opacity:.3
  }
  .article-folio>span {
    font-size:170px
  }
  .article-folio>b {
    display:none
  }
  .article-folio>i {
    height:8px
  }
  .article-cover-footer {
    gap:14px;
    font-size:8px;
    padding:17px 0
  }
  .article-cover-footer>a>span {
    margin-left:8px
  }
  .reading-page .article-layout {
    display:block;
    padding-top:30px;
    padding-bottom:40px
  }
  .reading-page .article-toc {
    margin-bottom:34px
  }
  .reading-page .article-toc nav {
    gap:12px
  }
  .reading-page .article-toc .reading-status,.reading-page .article-toc .toc-return {
    display:none
  }
  .reading-page .prose {
    font-size:16px;
    line-height:1.95
  }
  .reading-page .prose .article-lead {
    font-size:18px;
    padding-bottom:28px
  }
  .reading-page .prose h2 {
    font-size:24px;
    margin-top:40px
  }
  .reading-page .prose blockquote {
    font-size:17px;
    padding:20px
  }
  .reading-page .prose pre {
    font-size:12px;
    padding:46px 16px 20px
  }
  .code-label {
    left:16px
  }
  .reading-page .concept-strip>div {
    padding:20px 16px
  }
  .reading-page .concept-strip strong {
    font-size:16px
  }
  .reading-page .permission-grid strong {
    font-size:43px
  }
  .reading-page .permission-grid h3 {
    font-size:17px
  }
  .reading-page .session-flow>div {
    padding:20px
  }
  .reading-page .session-flow strong {
    font-size:18px
  }
  .reading-page .flow-label {
    font-size:10px
  }
  .reading-page .references {
    margin-top:40px
  }
  .reading-page .references h2,.reading-page .related h2 {
    font-size:18px
  }
  .next-note {
    padding-top:34px;
    padding-bottom:34px;
    gap:20px
  }
  .next-note>div>span {
    font-size:8px
  }
  .next-note strong {
    font-size:26px;
    margin-top:18px
  }
  .next-note p {
    font-size:12px
  }
  .next-note>b {
    font-size:25px
  }
  .next-note-number {
    font-size:160px;
    right:20px;
    bottom:-28px
  }
}
@media(prefers-reduced-motion:reduce) {
  .next-note>b,.next-orbit img {
    transition:none
  }
}
[data-reduced-motion="true"] .next-note>b,[data-reduced-motion="true"] .next-orbit img {
  transition:none
}
.no-js .reading-progress,.no-js .reading-status {
  display:none
}
/* A technical nine-slice diagram; labels remain available without scripts. */
.slice-grid {
  display:grid;
  grid-template-columns:1fr 1.4fr 1fr;
  border:1px solid #17191c;
  background:#17191c;
  gap:1px
}
.slice-grid>span,.slice-grid>strong {
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:24px 8px;
  min-height:82px;
  font-size:14px;
  background:var(--surface)
}
.slice-grid>strong {
  background:#ff4d2e;
  color:#17191c;
  font-weight:650
}
.slice-grid>span:nth-child(even) {
  background:var(--surface-hover)
}
@media(max-width:760px) {
  .slice-grid>span,.slice-grid>strong {
    padding:18px 4px;
    min-height:68px
  }
}

/* README screenshots and collection images retain their original proportions. */
.project-preview {
  margin:0;
  background:#151719;
  color:#f1efe9;
  min-width:0
}
.project-preview-images {
  display:grid;
  gap:1px;
  background:#ffffff20
}
.project-preview-images>a {
  display:flex;
  justify-content:center;
  align-items:center;
  background:#111214;
  outline-offset:4px
}
.project-preview img {
  display:block;
  width:100%;
  height:auto;
  max-height:560px;
  object-fit:contain
}
.project-preview figcaption {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:baseline;
  gap:10px 20px;
  padding:16px 20px;
  font-size:11px;
  line-height:1.8;
  color:#aaa79f
}
.project-preview figcaption a {
  color:inherit;
  text-underline-offset:4px
}
.preview-lab {
  padding:0;
  background:transparent
}
.preview-lab .project-preview {
  max-width:1200px;
  margin:auto
}
.kanban-figure {
  background:#151719;
  color:#f1efe9;
  padding:30px;
  margin:0;
  min-width:0
}
.kanban-caption {
  display:flex;
  justify-content:space-between;
  gap:20px;
  font:9px/1.8 var(--mono);
  letter-spacing:.1em;
  color:#ff795a;
  margin-bottom:28px
}
.kanban-lanes {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px
}
.kanban-lanes>div {
  border-top:2px solid #ff4d2e;
  padding-top:17px;
  min-width:0
}
.kanban-lanes>div>span {
  font:9px/1.8 var(--mono);
  color:#94938d
}
.kanban-lanes h3 {
  font-size:16px;
  line-height:1.7;
  font-weight:550;
  margin:20px 0
}
.kanban-lanes p {
  font-size:11px;
  line-height:1.9;
  border-top:1px solid #ffffff20;
  padding-top:14px;
  margin-top:14px;
  color:#c3bfb5
}
.kanban-figure>figcaption {
  font-size:10px;
  line-height:1.8;
  color:#96938b;
  margin-top:28px
}
.collection-lab {
  background:#111214;
  color:#f1efe9;
  padding:36px;
  scroll-margin-top:0
}
.collection-lab .lab-heading {
  max-width:1200px;
  margin:0 auto 30px
}
.collection-lab .lab-heading h2 {
  font-size:28px
}
.collection-lab .lab-heading>span {
  font:9px/1.8 var(--mono);
  color:#ff795a
}
.wallpaper-gallery {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:30px 24px;
  max-width:1200px;
  margin:auto
}
.wallpaper-tile {
  margin:0;
  min-width:0
}
.wallpaper-tile>a {
  display:block;
  position:relative;
  overflow:hidden;
  background:#090a0c;
  outline-offset:5px
}
.wallpaper-tile img {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/10;
  object-fit:contain;
  transition:filter .35s;
  filter:brightness(.9)
}
.wallpaper-tile>a>span {
  position:absolute;
  right:12px;
  bottom:12px;
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  background:#ff4d2e;
  color:#111214;
  font-size:20px;
  opacity:0;
  transition:opacity .25s
}
.wallpaper-tile>a:hover img,.wallpaper-tile>a:focus-visible img {
  filter:brightness(1)
}
.wallpaper-tile>a:hover>span,.wallpaper-tile>a:focus-visible>span {
  opacity:1
}
.wallpaper-tile>figcaption {
  display:flex;
  justify-content:space-between;
  gap:15px;
  margin-top:12px;
  font:10px/1.8 var(--mono);
  color:#d5cfc3
}
.wallpaper-tile>figcaption>span:last-child {
  color:#8b8880;
  font-size:9px;
  white-space:nowrap
}
.collection-credit {
  max-width:1200px;
  margin:28px auto 0;
  font-size:10px;
  line-height:1.9;
  color:#aaa59b
}
.editorial-project .wallpaper-gallery {
  gap:16px
}
.editorial-project .wallpaper-tile>figcaption {
  font-size:9px;
  margin-top:8px
}
.editorial-project .wallpaper-tile>figcaption>span:last-child {
  display:none
}
.editorial-project .collection-credit {
  font-size:9px;
  margin-top:18px
}
@media(max-width:1000px) {
  .kanban-figure {
    padding:24px
  }
  .kanban-lanes {
    gap:12px
  }
  .kanban-lanes h3 {
    font-size:14px
  }
  .kanban-lanes p {
    font-size:10px
  }
  .kanban-caption {
    font-size:8px
  }
}
@media(max-width:760px) {
  .collection-lab {
    padding:22px 18px
  }
  .collection-lab .lab-heading h2 {
    font-size:22px
  }
  .collection-lab .lab-heading>span {
    font-size:8px
  }
  .wallpaper-gallery {
    grid-template-columns:1fr;
    gap:26px
  }
  .wallpaper-tile img {
    filter:none
  }
  .wallpaper-tile>a>span {
    opacity:1;
    width:27px;
    height:27px;
    font-size:17px;
    right:8px;
    bottom:8px
  }
  .wallpaper-tile>figcaption {
    font-size:9px;
    gap:10px
  }
  .wallpaper-tile>figcaption>span:last-child {
    font-size:8px
  }
  .collection-credit {
    font-size:9px;
    margin-top:24px
  }
  .editorial-project .wallpaper-gallery {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px 12px
  }
  .kanban-figure {
    padding:20px
  }
  .kanban-caption {
    display:block;
    line-height:2
  }
  .kanban-caption>span {
    display:block
  }
  .kanban-lanes {
    grid-template-columns:1fr;
    gap:22px
  }
  .kanban-lanes h3 {
    font-size:17px;
    margin:8px 0 14px
  }
  .kanban-lanes p {
    font-size:11px;
    margin-top:8px;
    padding-top:8px
  }
  .kanban-figure>figcaption {
    font-size:9px
  }
}
@media(prefers-reduced-motion:reduce) {
  .wallpaper-tile img,.wallpaper-tile>a>span {
    transition:none
  }
}
[data-reduced-motion="true"] .wallpaper-tile img,[data-reduced-motion="true"] .wallpaper-tile>a>span {
  transition:none
}

/* Fixed cosmic artwork sits behind adaptive editorial surfaces. */
.orbit-home main {
  position:relative
}
.orbit-home main>section:not(.galaxy-experience) {
  position:relative;
  z-index:2
}
.orbit-home .feature-caption {
  background:#ff4d2e;
  color:#111214;
  padding-top:26px;
  padding-bottom:28px;
  border:0
}
.orbit-home .feature-caption .mono {
  color:#292322
}
.orbit-home .section:not(.writing-preview) {
  background:var(--paper);
  color:var(--ink);
  padding-top:60px
}
.orbit-home .section-label {
  border-color:var(--line)
}
.orbit-home .section-label .mono,.orbit-home .project-copy .mono {
  color:var(--muted)
}
.orbit-home .editorial-project {
  border-color:var(--line);
  padding:48px 0
}
.orbit-home .project-copy h3 {
  font-weight:650
}
.orbit-home .skills-figure {
  --paper:#f1efe9;
  --ink:#17191c;
  --muted:#63635e;
  --line:#c8c5bd;
  background:#f1efe9;
  color:#17191c
}
.orbit-home .writing-preview {
  background:var(--paper);
  color:var(--ink)
}
.orbit-home .writing-preview .section-label {
  border-color:var(--ink)
}
.orbit-home .writing-preview .section-label .mono,.orbit-home .writing-preview .writing-row .mono,.orbit-home .writing-preview .writing-row p {
  color:var(--muted)
}
.orbit-home .writing-preview .writing-row {
  border-color:var(--line)
}
.orbit-home .writing-preview a:focus-visible {
  outline-color:var(--ink)
}
.orbit-home .index-callout {
  color:#17191c
}
.orbit-home .footer {
  position:relative;
  z-index:2;
  background:#111214;
  color:#f1efe9
}
.orbit-home .footer-note,.orbit-home .footer .mono {
  color:#aba9a3
}
.orbit-home .text-link:hover:before {
  transform:rotate(90deg);
  transition:transform .2s
}
.orbit-home a:focus-visible {
  outline-color:#ff4d2e
}
.galaxy-experience {
  --cosmic-paper:#f1efe9;
  --cosmic-ink:#111214;
  --cosmic-red:#ff4d2e;
  color:var(--cosmic-paper);
  font-family:var(--body,var(--sans,sans-serif));
  position:relative;
  isolation:isolate
}
.galaxy-field {
  position:fixed;
  inset:0;
  z-index:-1;
  background:var(--cosmic-ink);
  pointer-events:none;
  overflow:hidden
}
.galaxy-field canvas,.galaxy-fallback {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  max-width:none;
  pointer-events:none
}
.galaxy-fallback {
  opacity:.8
}
.galaxy-field.ready .galaxy-fallback {
  display:none
}
.galaxy-field:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(17,18,20,.33),transparent 55%);
  pointer-events:none
}
.galaxy-cover {
  min-height:calc(100svh - 76px);
  min-height:calc(100vh - 76px);
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  padding:25px 32px 22px;
  gap:28px;
  user-select:none
}
.galaxy-topline {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:25px;
  font:11px/1.6 var(--mono,monospace);
  letter-spacing:.065em;
  color:#b8b4aa
}
.galaxy-controls {
  display:flex;
  align-items:center;
  gap:26px;
  white-space:nowrap
}
.galaxy-controls button {
  font:12px var(--body,var(--sans,sans-serif));
  background:none;
  color:#c8c5bd;
  border:0;
  padding:8px 0;
  cursor:pointer
}
.galaxy-controls button span {
  margin-left:9px;
  font-size:17px;
  display:inline-block
}
.galaxy-controls button:hover {
  color:#ff4d2e
}
.galaxy-controls button:disabled {
  opacity:.45;
  cursor:default
}
.galaxy-center {
  margin:auto 0;
  padding:36px 0 24px;
  position:relative
}
.galaxy-intro {
  display:flex;
  gap:19px;
  align-items:center;
  margin-bottom:24px
}
.galaxy-intro p {
  font-size:clamp(18px,1.75vw,26px);
  line-height:1.55;
  font-weight:600;
  letter-spacing:.02em;
  margin:0
}
.galaxy-cross {
  display:block;
  font:64px/1 var(--display,Archivo,sans-serif);
  color:#ff4d2e;
  transform:rotate(var(--cross-turn,0deg))
}
.galaxy-wordmark {
  font:900 clamp(100px,20.3vw,330px)/.8 var(--display,Archivo,sans-serif);
  font-variation-settings:'wght' 900,'wdth' 87;
  letter-spacing:-.055em;
  margin:0;
  white-space:nowrap;
  position:relative;
  display:flex;
  align-items:center;
  pointer-events:none
}
.galaxy-wordmark>span {
  display:block
}
.galaxy-outline {
  -webkit-text-stroke:1.2px #f1efe9;
  color:transparent
}
.galaxy-wordmark i {
  display:block;
  height:2px;
  background:#ff4d2e;
  position:absolute;
  top:48%;
  left:0;
  width:100%;
  transform:scaleX(var(--cut-length,.21));
  transform-origin:left;
  transition:transform .5s cubic-bezier(.2,.6,.2,1);
  opacity:.75
}
.galaxy-experience:hover .galaxy-wordmark i {
  transform:scaleX(.72)
}
.galaxy-subline {
  display:flex;
  justify-content:space-between;
  max-width:1170px;
  margin-top:25px;
  font:11px var(--mono,monospace);
  letter-spacing:.17em;
  color:#c8c5bd
}
.galaxy-state {
  letter-spacing:.05em;
  display:flex;
  align-items:center;
  gap:9px
}
.galaxy-state:before {
  content:'';
  display:inline-block;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#ff4d2e
}
.galaxy-bottom {
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr;
  align-items:end;
  gap:35px;
  padding-bottom:26px
}
.galaxy-deck p {
  font-size:14px;
  line-height:1.9;
  margin:0;
  color:#c8c5bd
}
.galaxy-links {
  display:flex;
  align-items:center;
  gap:27px;
  margin-top:24px
}
.galaxy-links a {
  font-size:13px;
  display:inline-flex;
  align-items:center;
  gap:28px;
  text-decoration:none;
  white-space:nowrap
}
.galaxy-links .galaxy-primary {
  background:#ff4d2e;
  color:#111214;
  padding:13px 18px;
  font-weight:600
}
.galaxy-links a span {
  font-size:18px;
  transition:transform .18s
}
.galaxy-links a:hover span {
  transform:translate(3px,-3px)
}
.galaxy-pulse {
  border:1px solid #f1efe94d;
  background:rgba(17,18,20,.25);
  color:#f1efe9;
  text-align:left;
  padding:18px 20px;
  display:flex;
  gap:17px;
  align-items:center;
  cursor:pointer;
  max-width:310px;
  transition:background .25s,border-color .25s,transform .25s
}
.galaxy-pulse>span:nth-child(2) {
  font-size:15px;
  line-height:1.6
}
.galaxy-pulse small {
  display:block;
  font:9px var(--mono,monospace);
  letter-spacing:.08em;
  color:#ada99f;
  margin-top:5px
}
.galaxy-pulse .pulse-icon {
  font-size:38px;
  color:#ff4d2e;
  line-height:1;
  transition:transform .4s
}
.galaxy-pulse b {
  font-size:19px;
  margin-left:12px;
  font-weight:400
}
.galaxy-pulse:hover {
  border-color:#ff4d2e;
  background:#ff4d2e13;
  transform:translateY(-3px)
}
.galaxy-pulse:hover .pulse-icon {
  transform:rotate(90deg)
}
.galaxy-pulse:disabled {
  opacity:.5;
  cursor:default
}
.galaxy-instructions {
  justify-self:end;
  display:flex;
  flex-direction:column;
  gap:7px;
  font-size:11px;
  color:#a09e96;
  line-height:1.5;
  text-align:right
}
.galaxy-instructions span:before {
  content:'—';
  margin-right:10px;
  color:#ff4d2e
}
.galaxy-instructions .touch-instruction {
  display:none
}
.galaxy-scroll {
  border-top:1px solid #f1efe92c;
  padding-top:16px;
  display:flex;
  gap:14px;
  font:10px/1.5 var(--mono,monospace);
  letter-spacing:.08em;
  color:#b8b4aa;
  text-decoration:none;
  align-items:center
}
.galaxy-scroll span {
  font-size:18px;
  color:#ff4d2e
}
.galaxy-experience a:focus-visible,.galaxy-experience button:focus-visible {
  outline:2px solid #ff4d2e;
  outline-offset:5px
}
.galaxy-experience.is-dragging {
  cursor:grabbing
}
.galaxy-experience.is-dragging .galaxy-wordmark i {
  transform:scaleX(1)
}
.no-js .galaxy-controls,.no-js .galaxy-pulse,.no-js .galaxy-instructions {
  display:none
}
.no-js .galaxy-bottom {
  grid-template-columns:1fr
}
.no-js .galaxy-state {
  display:none
}
/* The comparison keeps the other two concepts intact. */
#section:has(.galaxy-experience) {
  background:#111214;
  color:#f1efe9
}
#section:has(.galaxy-experience)>.site-nav,#section:has(.galaxy-experience)>.section-masthead {
  display:none
}
#section:has(.galaxy-experience) .galaxy-cover {
  min-height:calc(100svh - 64px)
}
#section:has(.galaxy-experience)>.section-project {
  background:#ff4d2e;
  color:#111214;
  margin:0;
  padding:28px var(--g)
}
#section:has(.galaxy-experience)>.section-bottom,#section:has(.galaxy-experience)>.site-footer {
  background:#111214;
  position:relative;
  z-index:2
}
#section:has(.galaxy-experience) .galaxy-field {
  z-index:0
}
#section:has(.galaxy-experience) .galaxy-cover {
  z-index:1
}
@media(min-width:1700px) {
  .galaxy-cover {
    padding-left:52px;
    padding-right:52px
  }
  .galaxy-wordmark {
    font-size:19vw
  }
  .galaxy-center {
    padding-top:65px;
    padding-bottom:45px
  }
}
@media(max-width:900px) {
  .galaxy-cover {
    padding-left:24px;
    padding-right:24px;
    min-height:850px
  }
  .galaxy-topline {
    font-size:9px
  }
  .galaxy-controls {
    gap:16px
  }
  .galaxy-controls button {
    font-size:11px
  }
  .galaxy-wordmark {
    font-size:20vw
  }
  .galaxy-bottom {
    grid-template-columns:1.4fr 1fr;
    gap:22px
  }
  .galaxy-instructions {
    display:none
  }
  .galaxy-intro {
    margin-bottom:30px
  }
  .galaxy-pulse {
    padding:15px
  }
  .galaxy-pulse b {
    display:none
  }
}
@media(max-width:600px) {
  .galaxy-cover {
    min-height:calc(100svh - 106px);
    padding:15px 20px 20px;
    gap:18px
  }
  .galaxy-topline {
    align-items:start;
    gap:20px
  }
  .galaxy-topline>span {
    max-width:135px;
    font-size:8px;
    line-height:1.8;
    letter-spacing:.02em
  }
  .galaxy-controls {
    gap:14px
  }
  .galaxy-controls button {
    font-size:10px;
    padding-top:0
  }
  .galaxy-controls button span {
    font-size:13px;
    margin-left:4px
  }
  .galaxy-controls .galaxy-reset {
    font-size:0
  }
  .galaxy-controls .galaxy-reset span {
    font-size:21px
  }
  .galaxy-center {
    padding:115px 0 50px;
    margin:0
  }
  .galaxy-intro {
    gap:12px;
    margin-bottom:24px
  }
  .galaxy-intro p {
    font-size:17px;
    line-height:1.6
  }
  .galaxy-cross {
    font-size:40px
  }
  .galaxy-wordmark {
    font-size:20.5vw;
    letter-spacing:-.06em
  }
  .galaxy-outline {
    -webkit-text-stroke:.7px #f1efe9
  }
  .galaxy-subline {
    font-size:8px;
    letter-spacing:.09em;
    margin-top:17px
  }
  .galaxy-wordmark i {
    height:1px
  }
  .galaxy-bottom {
    grid-template-columns:1fr auto;
    gap:20px;
    padding-bottom:5px;
    align-items:center
  }
  .galaxy-deck p {
    font-size:12px;
    line-height:1.8
  }
  .galaxy-links {
    gap:18px;
    margin-top:18px
  }
  .galaxy-links a {
    font-size:11px;
    gap:12px
  }
  .galaxy-links .galaxy-primary {
    padding:11px 12px
  }
  .galaxy-links a span {
    font-size:15px
  }
  .galaxy-pulse {
    border:none;
    padding:8px 0;
    gap:0;
    background:none;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    max-width:70px
  }
  .galaxy-pulse .pulse-icon {
    font-size:38px
  }
  .galaxy-pulse>span:nth-child(2) {
    font-size:10px;
    margin-top:8px
  }
  .galaxy-pulse small,.galaxy-pulse b {
    display:none
  }
  .galaxy-scroll {
    font-size:8px;
    margin-top:14px;
    padding-top:14px
  }
  .orbit-home .section:not(.writing-preview) {
    padding-top:38px
  }
  .orbit-home .editorial-project {
    padding:30px 0
  }
  #section:has(.galaxy-experience) .galaxy-cover {
    min-height:calc(100svh - 55px)
  }
}
@media(prefers-reduced-motion:reduce) {
  .galaxy-experience * {
    animation:none!important;
    transition:none!important
  }
  .galaxy-wordmark i {
    transform:scaleX(.21)!important
  }
  .galaxy-cross {
    transform:none!important
  }
}
html[data-reduced-motion="true"] .galaxy-experience * {
  animation:none!important;
  transition:none!important
}
.galaxy-experience[data-paused="true"] .galaxy-wordmark i {
  transform:scaleX(.21)!important
}
@media(min-width:901px) and (max-height:800px) {
  .galaxy-cover {
    padding-top:15px;
    padding-bottom:16px;
    gap:18px
  }
  .galaxy-center {
    padding:6px 0 4px
  }
  .galaxy-intro {
    margin-bottom:18px
  }
  .galaxy-cross {
    font-size:46px
  }
  .galaxy-intro p {
    font-size:19px;
    line-height:1.4
  }
  .galaxy-subline {
    margin-top:20px
  }
  .galaxy-bottom {
    padding-bottom:12px
  }
  .galaxy-deck p {
    line-height:1.65
  }
  .galaxy-links {
    margin-top:16px
  }
  .galaxy-scroll {
    padding-top:12px
  }
}
/* Surface passage and the project constellation. */
.galaxy-cover  {
  overflow: clip;
}
.galaxy-wordmark > span  {
  transform: translateX(var(--type-kick, 0px));
}
.galaxy-wordmark > .galaxy-outline  {
  transform: translateX(calc(-1 * var(--type-kick, 0px)));
}
.galaxy-pulse  {
  position: relative;
  overflow: hidden;
  touch-action: none;
  user-select: none;
}
.galaxy-pulse::after  {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  transform: scaleX(var(--charge, 0));
  transform-origin: left;
  height: 3px;
  background: #f1efe9;
  box-shadow: 0 0 22px #ff4d2e;
}
.galaxy-pulse .charge-label  {
  display: block;
}
.is-charging .galaxy-pulse  {
  border-color: #ff4d2e;
  background: #ff4d2e20;
}
.is-charging .pulse-icon  {
  color: #f1efe9;
  transform: rotate(calc(var(--charge, 0) * 270deg)) scale(1.15);
}
.is-charging .galaxy-outline  {
  -webkit-text-stroke-color: #ff4d2e;
}
.galaxy-journey  {
  position: relative;
  min-height: 135vh;
}
.journey-stage  {
  min-height: calc(100svh - 76px);
  position: sticky;
  top: 76px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.journey-meta, .journey-baseline  {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 28px;
  font: 10px/1.6 var(--mono);
  letter-spacing: .12em;
}
.journey-meta  {
  color: #c8c5bd;
}
.journey-depth  {
  color: #ff6742;
}
.journey-copy  {
  padding: 40px 0 55px;
  transform: translateY(var(--journey-shift, 0px));
}
.journey-overline  {
  color: #f1efe9;
  font-size: 15px;
  margin-bottom: 30px;
}
.journey-copy h2  {
  font: 850 clamp(65px, 12vw, 210px)/.84 var(--display);
  font-variation-settings: 'wght' 850, 'wdth' 85;
  letter-spacing: -.055em;
}
.journey-copy h2 span  {
  display: block;
}
.journey-copy h2 span:first-child  {
  color: transparent;
  -webkit-text-stroke: 1px #f1efe9;
}
.journey-copy h2 span:last-child  {
  font-size: .66em;
  color: #f1efe9;
  margin-top: .14em;
}
.journey-baseline  {
  padding-top: 20px;
  border-top: 1px solid #f1efe92b;
}
.journey-baseline a  {
  text-decoration: none;
}
.journey-baseline a span  {
  color: #ff4d2e;
  margin-left: 20px;
}
.journey-progress  {
  width: 180px;
  height: 2px;
  background: #f1efe931;
}
.journey-progress i  {
  display: block;
  width: 100%;
  transform: scaleX(var(--journey, 0));
  transform-origin: left;
  height: 100%;
  background: #ff4d2e;
}
.galaxy-atlas  {
  padding: 50px 32px 40px;
  position: relative;
  background: linear-gradient(#11121400, #111214ba 25%, #111214d9);
  scroll-margin-top: 0;
}
.atlas-header  {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
}
.atlas-kicker  {
  font: 10px/1.6 var(--mono);
  letter-spacing: .13em;
  color: #ff6742;
  margin-bottom: 25px;
}
.atlas-header h2  {
  font-size: clamp(38px, 4.8vw, 76px);
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -.035em;
}
.atlas-header h2 em  {
  font-style: normal;
  color: #ff4d2e;
}
.atlas-header > p  {
  color: #aaa79f;
  font-size: 13px;
  line-height: 1.9;
  text-align: right;
}
.planet-map  {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 50px 65px;
  padding: 45px 45px 90px;
  max-width: 1400px;
  margin: 10px auto 0;
}
.atlas-orbits  {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: #ff4d2e;
  opacity: .23;
  stroke-width: .7;
  pointer-events: none;
  transition: opacity .4s;
}
.planet-map:has(.orbit-node:hover) .atlas-orbits, .planet-map:has(.orbit-node:focus-visible) .atlas-orbits  {
  opacity: .53;
}
.atlas-core  {
  position: absolute;
  left: 50%;
  top: 46%;
  color: #ff4d2e;
  font: 42px/1 var(--display);
  text-align: center;
  pointer-events: none;
}
.atlas-core small  {
  display: block;
  font: 8px/1 var(--mono);
  letter-spacing: .2em;
  color: #f1efe966;
  margin-top: 12px;
}
.orbit-node  {
  width: 100%;
  max-width: 270px;
  justify-self: center;
  position: relative;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  isolation: isolate;
  outline-offset: 12px!important;
}
.orbit-node:nth-of-type(3n+2)  {
  transform: translateY(45px);
}
.orbit-node[data-planet="4"] .planet-body  {
  rotate: 28deg;
}
.orbit-node[data-planet="5"] .planet-body  {
  rotate: -25deg;
}
.planet-index  {
  align-self: start;
  font: 9px/1.5 var(--mono);
  letter-spacing: .05em;
  color: #a9a69e;
}
.planet-body  {
  display: block;
  width: 190px;
  height: 190px;
  position: relative;
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.planet-body img  {
  width: 100%;
  height: 100%;
  animation: planet-drift 9s ease-in-out infinite;
}
.orbit-node:nth-of-type(even) .planet-body img  {
  animation-delay: -4s;
}
.orbit-node[data-planet="0"] .planet-body  {
  width: 225px;
  height: 225px;
}
.planet-reticle  {
  position: absolute;
  inset: 15%;
  border: 1px solid transparent;
  border-radius: 50%;
  transition: border-color .3s, transform .6s;
}
.planet-reticle::after  {
  content: '';
  position: absolute;
  top: -4px;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ff4d2e;
  opacity: 0;
}
.planet-name  {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  font: 550 19px/1.4 var(--display);
  letter-spacing: -.025em;
  padding-top: 12px;
  border-top: 1px solid #f1efe930;
  transition: color .25s;
}
.planet-name > span  {
  color: #ff4d2e;
  font-size: 20px;
}
.planet-summary  {
  margin-top: 10px;
  font-size: 11px;
  line-height: 1.8;
  color: #aaa79f;
  opacity: .6;
  transition: opacity .3s;
}
.orbit-node:hover .planet-body, .orbit-node:focus-visible .planet-body  {
  transform: scale(1.15) rotate(-8deg);
}
.orbit-node:hover .planet-name, .orbit-node:focus-visible .planet-name  {
  color: #ff6742;
}
.orbit-node:hover .planet-summary, .orbit-node:focus-visible .planet-summary  {
  opacity: 1;
}
.orbit-node:hover .planet-reticle, .orbit-node:focus-visible .planet-reticle  {
  border-color: #ff4d2e;
  transform: rotate(95deg) scale(1.3);
}
.orbit-node:hover .planet-reticle::after, .orbit-node:focus-visible .planet-reticle::after  {
  opacity: 1;
}
.atlas-footer  {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid #f1efe930;
  padding-top: 23px;
  font-size: 12px;
  color: #aaa79f;
}
.atlas-footer a  {
  color: #f1efe9;
  text-decoration: none;
}
.atlas-footer a span  {
  margin-left: 25px;
  color: #ff4d2e;
}
.planet-portal  {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  overflow: hidden;
  background: #11121400;
  transition: background .48s ease-in;
}
.planet-portal img  {
  width: 240px;
  height: 240px;
  position: absolute;
  left: var(--portal-x);
  top: var(--portal-y);
  margin: -120px 0 0 -120px;
  transition: transform .52s cubic-bezier(.6,0,.9,.35), opacity .52s;
}
.planet-portal.enter  {
  background: #111214;
}
.planet-portal.enter img  {
  transform: scale(13) rotate(35deg);
  opacity: 0;
}
.galaxy-experience[data-paused="true"] .planet-body img  {
  animation-play-state: paused;
}
@keyframes planet-drift  {
  0%,100%  {
    transform: translateY(0) rotate(-3deg);
  }
  50%  {
    transform: translateY(-9px) rotate(3deg);
  }
}
.no-js .galaxy-journey  {
  min-height: auto;
}
.no-js .journey-stage  {
  min-height: 450px;
  position: relative;
  top: auto;
}
@media(max-width:1000px)  {
  .planet-map  {
    height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 45px 60px;
    padding: 50px 30px;
  }
  .orbit-node,.orbit-node:nth-of-type(3n+2)  {
    position: relative;
    inset: auto!important;
    transform: none;
    width: 100%;
    max-width: 310px;
    justify-self: center;
  }
  .planet-body, .orbit-node[data-planet="0"] .planet-body  {
    width: 210px;
    height: 210px;
  }
  .atlas-core  {
    display: none;
  }
}
@media(max-width:600px)  {
  .galaxy-journey  {
    min-height: 115svh;
  }
  .journey-stage  {
    padding: 24px 20px;
    top: 94px;
    min-height: calc(100svh - 94px);
  }
  .journey-meta, .journey-baseline  {
    font-size: 8px;
    gap: 16px;
  }
  .journey-copy  {
    padding-bottom: 90px;
  }
  .journey-copy h2  {
    font-size: 17vw;
  }
  .journey-overline  {
    font-size: 12px;
  }
  .journey-progress  {
    width: 75px;
  }
  .galaxy-atlas  {
    padding: 50px 20px 30px;
    scroll-margin-top: 0;
  }
  .atlas-header  {
    display: block;
  }
  .atlas-header h2  {
    font-size: 43px;
  }
  .atlas-header > p  {
    text-align: left;
    font-size: 11px;
    margin-top: 22px;
  }
  .atlas-kicker  {
    font-size: 8px;
    margin-bottom: 20px;
  }
  .planet-map  {
    padding: 40px 0;
    gap: 40px 23px;
  }
  .planet-body, .orbit-node[data-planet="0"] .planet-body  {
    width: 150px;
    height: 150px;
  }
  .planet-name  {
    font-size: 14px;
    gap: 6px;
    overflow-wrap: anywhere;
  }
  .planet-name > span  {
    font-size: 16px;
  }
  .planet-index  {
    font-size: 8px;
  }
  .planet-summary  {
    font-size: 10px;
    opacity: .8;
  }
  .atlas-orbits  {
    opacity: .12;
  }
  .atlas-footer  {
    font-size: 10px;
    line-height: 1.8;
    align-items: start;
  }
  .atlas-footer > span  {
    max-width: 135px;
  }
  .atlas-footer a span  {
    margin-left: 10px;
  }
}
@media(prefers-reduced-motion:reduce)  {
  .planet-body img  {
    animation: none!important;
  }
  .journey-copy, .galaxy-wordmark > span  {
    transform: none!important;
  }
  .galaxy-journey  {
    min-height: auto;
  }
  .journey-stage  {
    position: relative;
    top: auto;
    min-height: 50vh;
  }
}
html[data-reduced-motion="true"] .planet-body img  {
  animation: none!important;
}
html[data-reduced-motion="true"] .galaxy-journey  {
  min-height: auto;
}
html[data-reduced-motion="true"] .journey-stage  {
  position: relative;
  top: auto;
  min-height: 50vh;
}
html[data-reduced-motion="true"] .journey-copy, html[data-reduced-motion="true"] .galaxy-wordmark > span  {
  transform: none!important;
}
@media(max-width:600px) {
  .galaxy-pulse {
    min-width:56px;
    min-height:72px
  }
  .galaxy-controls .galaxy-reset {
    min-width:30px;
    min-height:30px
  }
}

/* Orbit labels keep their last pose while their own section is offscreen. */
.galaxy-experience:not([data-atlas-visible="true"]) .planet-body img {
  animation-play-state: paused;
}

/* Isolate the continuously painted background from the editorial document. */
.galaxy-field { contain: strict; }
.galaxy-field canvas { will-change: transform; }

/* Shared select-only combobox. Both the trigger and popup follow the same tokens. */
.select-control  {
  position: relative;
  min-width: 0;
}
.select-control .select-trigger  {
  width: 100%;
  min-height: 54px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 2px;
  font: 500 .875rem/1.6 var(--body);
  text-align: left;
  transition: border-color 180ms, background 180ms, box-shadow 180ms;
}
.select-trigger > span  {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.select-trigger > i  {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid;
  border-bottom: 1.5px solid;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 180ms;
}
.select-control .select-trigger:hover  {
  border-color: var(--ink);
}
.select-control[data-selected="true"] .select-trigger  {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}
.select-control.is-open  {
  z-index: 15;
}
.select-control.is-open .select-trigger  {
  border-color: var(--red);
  box-shadow: inset 3px 0 0 var(--red);
}
.select-control.is-open .select-trigger > i  {
  transform: rotate(225deg) translate(-2px,-2px);
}
.select-options  {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 16;
  max-height: min(300px, 45vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0;
  padding: 7px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--ink);
  border-top: 3px solid var(--red);
  box-shadow: 8px 10px 0 #17191c0b, 0 14px 30px #17191c10;
  scrollbar-width: thin;
  scrollbar-color: var(--muted) transparent;
  animation: select-arrive 160ms var(--ease-out);
}
.opens-up .select-options  {
  top: auto;
  bottom: calc(100% + 8px);
}
.select-option  {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  min-height: 43px;
  font: .875rem/1.65 var(--body);
  cursor: pointer;
}
.select-option::after  {
  content: '';
  width: 6px;
  height: 6px;
  margin-left: auto;
  flex-shrink: 0;
  background: transparent;
}
.select-option[aria-selected="true"]  {
  color: var(--accent-text);
  font-weight: 650;
}
.select-option[aria-selected="true"]::after  {
  background: var(--red);
}
.select-option.is-active, .select-option:hover  {
  background: var(--ink);
  color: var(--paper);
}
.writing-filters  {
  display: grid;
  grid-template-columns: 1fr 1fr 1.45fr auto;
  gap: 22px;
  padding: 24px 0;
}
.writing-filters > div  {
  min-width: 0;
}
.writing-filters label  {
  font-size: .875rem;
  margin-bottom: 10px;
}
.writing-filters > button  {
  align-self: end;
  min-height: 54px;
  padding: 10px 0;
  font-size: .875rem;
  border: 0;
  color: var(--muted);
}
.writing-filters > button:hover  {
  color: var(--ink);
}
.writing-filters > button::before  {
  content: '×';
  margin-right: 8px;
  color: var(--red);
  font-size: 20px;
}
.listing-controls  {
  gap: 18px;
  flex-wrap: wrap;
}
.listing-controls > label  {
  font-size: .875rem;
}
.listing-controls > .select-control  {
  width: 220px;
}
.listing-controls .count  {
  margin-left: auto;
  font-size: .875rem;
}
.search-form  {
  max-width: 960px;
  border: 0;
  position: relative;
  margin-top: 34px;
  gap: 0;
}
.search-form input  {
  min-width: 0;
  width: 100%;
  padding: 19px 20px;
  font-size: 1.125rem;
  background: var(--surface);
  border: 1px solid transparent;
  border-bottom: 2px solid var(--ink);
  border-radius: 0;
}
.search-form input:focus  {
  outline: 0;
  border-bottom-color: var(--red);
  box-shadow: inset 3px 0 0 var(--red);
}
.search-form > button  {
  flex-shrink: 0;
  padding: 18px 28px;
  border: 0;
  background: var(--ink);
  color: var(--paper);
  font-size: .875rem;
}
.search-form > button:hover  {
  background: var(--red);
  color: var(--on-accent);
}
@keyframes select-arrive  {
  from  {
    opacity: 0;
    transform: translateY(-5px);
  }
  to  {
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 760px)  {
  .writing-filters  {
    grid-template-columns: 1fr 1fr;
    gap: 18px 12px;
  }
  .writing-filters > div:nth-child(3)  {
    grid-column: 1 / -1;
  }
  .writing-filters > button  {
    grid-column: 1 / -1;
    min-height: 30px;
    padding: 0;
    justify-self: end;
  }
  .select-control .select-trigger  {
    padding: 12px 14px;
    min-height: 50px;
  }
  .writing-filters label  {
    font-size: .8125rem;
  }
  .select-option  {
    padding: 11px 9px;
  }
  .search-form input  {
    font-size: 1rem;
    padding: 16px 12px;
  }
  .search-form > button  {
    padding: 14px 18px;
  }
  .listing-controls > .select-control  {
    width: min(190px, 58%);
  }
}

.topbar {
  position:sticky;
  top:0;
  z-index:20;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:20px;
  min-height:76px;
  max-width:1180px;
  margin-inline:auto;
  padding:8px 28px;
  border-bottom:1px solid var(--line);
  background:var(--paper)
}

.brand {
  display:inline-flex;
  align-items:center;
  gap:14px;
  font-family:var(--display);
  font-weight:850;
  font-size:1.25rem;
  text-decoration:none;
  justify-self:start
}
.brand-mark {
  width:23px;
  height:24px;
  display:inline-block;
  background:linear-gradient(currentColor 0 36%,transparent 36% 47%,var(--red) 47% 63%,transparent 63% 72%,currentColor 72%);
  transform:skewY(-10deg)
}
.brand span:last-child {
  font-family:var(--body);
  font-size:.8125rem;
  font-weight:500
}
.topbar nav {
  display:flex;
  gap:24px;
  align-items:center
}
.topbar nav a {
  font-size:.875rem;
  text-decoration:none;
  padding:12px 0;
  position:relative
}
.topbar nav a[aria-current="page"]:after {
  content:'';
  height:3px;
  background:var(--red);
  position:absolute;
  bottom:5px;
  left:0;
  right:0
}
.nav-actions {
  justify-self:end;
  display:flex;
  flex-direction:row;
  gap:14px;
  align-items:center
}
.search-link {
  font-size:.875rem;
  text-decoration:none;
  display:flex;
  gap:8px;
  align-items:center
}
.search-symbol {
  border:1.5px solid currentColor;
  width:12px;
  height:12px;
  border-radius:50%;
  position:relative;
  display:inline-block
}
.search-symbol:after {
  content:'';
  position:absolute;
  width:5px;
  height:1.5px;
  background:currentColor;
  right:-4px;
  bottom:-2px;
  transform:rotate(48deg)
}
.motion {
  font-size:.75rem;
  border:0;
  border-left:1px solid var(--line);
  background:none;
  padding:5px 0;
  white-space:nowrap
}
.motion:before {
  content:'';
  display:inline-block;
  width:8px;
  height:8px;
  border:1px solid currentColor;
  margin-right:8px
}
.motion[aria-pressed="true"]:before {
  background:currentColor
}
.no-js .topbar .motion {
  display:none
}
/* Stable shell and nested library navigation. */
.topbar nav a  {
  display: flex;
  gap: 10px;
  align-items: center;
}
.topbar nav a::after  {
  content: '';
  height: 2px;
  background: var(--red);
  position: absolute;
  bottom: 5px;
  left: 0;
  right: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms var(--ease-out);
}
.topbar nav a:hover::after, .topbar nav a[aria-current="page"]::after  {
  transform: scaleX(1);
}
.topbar .motion  {
  font-size: .8125rem;
  border-left: 0;
}
#main:focus, #main h1:focus  {
  outline: none;
}
.page-intro  {
  padding-top: 44px;
  padding-bottom: 34px;
}
.page-intro h1  {
  font-size: clamp(3.25rem, 6.5vw, 6rem);
}
.writing-navigation  {
  display: flex;
  gap: 4px;
  flex-wrap: nowrap;
  margin-top: 26px;
  padding: 4px;
  width: fit-content;
  background: var(--surface);
  font-size: .875rem;
}
.writing-navigation a  {
  padding: 10px 23px;
  white-space: nowrap;
  border: 0;
  transition: background 160ms, color 160ms;
}
.writing-navigation a[aria-current="page"]  {
  background: var(--ink);
  color: var(--paper);
  box-shadow: inset 0 -3px var(--red);
  font-weight: 500;
}
.writing-navigation a:hover:not([aria-current])  {
  background: var(--surface-hover);
}
.category-navigation  {
  font-size: .875rem;
  gap: 18px 28px;
}
.category-navigation span  {
  font-size: .75rem;
}
.writing-list-status, .writing-list-status a  {
  font-size: .875rem;
}
.note-taxonomy, .light-list .note-taxonomy  {
  font-size: .8125rem;
}
.topic-row-copy .eyebrow, .topics-count  {
  font-size: .75rem;
}
.topic-chapters li  {
  font-size: .875rem;
}
.route-error  {
  position: fixed;
  z-index: 80;
  bottom: 24px;
  right: var(--gutter);
  left: var(--gutter);
  width: fit-content;
  margin-left: auto;
  max-width: calc(100vw - 2 * var(--gutter));
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  background: var(--ink);
  color: var(--paper);
  border-left: 4px solid var(--red);
  font-size: .875rem;
  box-shadow: 0 8px 35px #0003;
}
.route-error button  {
  background: none;
  color: inherit;
  border: 0;
  text-decoration: underline;
  padding: 5px;
}
@media (max-width: 680px)  {
  .topbar  {
    grid-template-columns: 1fr auto;
    gap: 0 12px;
    padding: 8px 22px 4px;
  }
  .topbar nav  {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: start;
    gap: 24px;
  }
  .topbar nav a  {
    font-size: .875rem;
    padding: 10px 0;
  }
  .topbar nav a::after, .topbar nav a[aria-current="page"]::after  {
    bottom: 3px;
  }
  .nav-actions  {
    grid-column: 2;
    grid-row: 1;
    flex-direction:row;
    align-items:center;
  }
  .topbar .motion  {
    display: block;
    padding: 5px 0;
    font-size: .75rem;
  }
}
@media (max-width:760px) {
  .page-intro  {
    padding-top: 32px;
    padding-bottom: 26px;
  }
  .page-intro h1  {
    font-size: 3.25rem;
  }
  .writing-navigation  {
    width: 100%;
    gap: 2px;
    margin-top: 24px;
  }
  .writing-navigation a  {
    flex: 1;
    text-align: center;
    padding: 10px 9px;
    font-size: .875rem;
  }
  .category-navigation  {
    gap: 14px 22px;
    font-size: .8125rem;
  }
  .writing-list-status, .writing-list-status a  {
    font-size: .8125rem;
  }
}

/* The theme picker belongs to the persistent shell, not the routed content. */
.topbar { color:var(--ink); }
.theme-picker { width:130px; }
.theme-picker .select-control .select-trigger {
  min-height:38px;
  padding:8px 10px;
  gap:10px;
  font-size:.75rem;
  background:var(--paper);
  color:var(--ink);
  border-color:var(--line);
}
.theme-picker .select-trigger::before {
  content:'';
  flex-shrink:0;
  width:12px;
  height:12px;
  border:1px solid currentColor;
  border-radius:50%;
  background:linear-gradient(90deg,currentColor 50%,transparent 50%);
  transform:rotate(-35deg);
}
.theme-picker .select-trigger > span { flex:1; }
.theme-picker .select-trigger > i { width:6px; height:6px; }
.theme-picker .select-options { left:auto; width:160px; }
body, .topbar { transition:background-color 180ms ease, color 180ms ease; }
@media (min-width:681px) and (max-width:980px) {
  .topbar { grid-template-columns:1fr auto 1fr; gap:14px; padding:8px 24px; }
  .topbar nav { grid-column:2; grid-row:1; gap:20px; }
  .topbar nav a { padding:12px 0; }
  .nav-actions { grid-column:3; grid-row:1; flex-direction:row; align-items:center; gap:10px; }
  .topbar .brand span:last-child { display:none; }
  .theme-picker { width:116px; }
  .topbar .motion { font-size:0; width:28px; height:38px; padding:0; }
  .topbar .motion::before { margin:0; width:10px; height:10px; }
}
@media (max-width:480px) {
  .topbar { gap:4px 10px; }
  .topbar .brand { font-size:1.05rem; gap:9px; }
  .topbar .brand span:last-child { display:none; }
  .nav-actions { gap:8px; }
  .theme-picker { width:116px; }
  .topbar .motion { font-size:0; width:32px; height:38px; }
  .topbar .motion::before { margin:0; width:10px; height:10px; }
}

/* Real language links keep every document usable without JavaScript. */
.language-switch { display:flex; align-items:center; gap:2px; white-space:nowrap; border:1px solid var(--line); border-radius:4px; padding:2px; }
.language-switch a { display:grid; place-items:center; min-width:30px; min-height:30px; padding:3px 5px; font-family:var(--mono); font-size:.875rem; text-decoration:none; border-radius:2px; }
.language-switch a[aria-current="true"] { color:var(--paper); background:var(--ink); }
.language-switch a:hover:not([aria-current]) { background:var(--surface-hover); }
.language-note { font-size:.875rem; line-height:1.5; border-left:2px solid var(--red); padding-left:12px; color:var(--muted); }
html[lang="en"] .galaxy-intro p { max-width:15em; }
html[lang="en"] .galaxy-deck p { max-width:20em; }
html[lang="en"] .case-hero-copy h1 { font-size:clamp(2.6rem, 6vw, 6rem); }
@media (min-width:681px) { .topbar { grid-template-columns:auto 1fr auto; gap:18px; } .topbar nav { justify-content:center; } }
@media (min-width:681px) and (max-width:1100px) {
  .topbar .brand span:last-child { display:none; }
  .topbar .motion { font-size:0; width:26px; height:38px; padding:0; }
  .topbar .motion::before { margin:0; }
  .nav-actions { gap:8px; }
  .topbar nav { gap:18px; }
  .theme-picker { width:105px; }
}
@media (max-width:680px) {
  .topbar { grid-template-columns:auto 1fr; }
  .topbar .brand span:last-child { display:none; }
  .topbar .motion { font-size:0; width:26px; height:36px; padding:0; }
  .topbar .motion::before { margin:0; }
  .nav-actions { gap:6px; }
  .theme-picker { width:100px; }
  .topbar nav { justify-content:space-between; }
  html[lang="en"] .galaxy-topline { font-size:.65rem; }
}
@media (max-width:380px) {
  .topbar { padding-inline:14px; }
  .topbar .brand { gap:6px; font-size:.95rem; }
  .brand-mark { width:18px; }
  .theme-picker { width:86px; }
  .theme-picker .select-trigger::before { display:none; }
  .language-switch a { min-width:26px; padding-inline:3px; }
}

html[data-language-redirect="true"] body { visibility:hidden; }
html[lang="en"] :is(h1, h2, h3) { overflow-wrap:anywhere; }

/* One neutral optical material. Text still follows the page's contrast. */
.liquid-glass, .liquid-glass-defs { display:none; }
@media (prefers-reduced-motion:no-preference) {
  @supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)) {
    html[data-reduced-motion="false"] .topbar[data-glass-ready] {
      --glass-inset:clamp(6px,1vw,12px);
      background:transparent;
      border-bottom-color:transparent;
      isolation:isolate;
      /* A named parent traps a descendant's backdrop inside the empty shell.
         Include this surface in the root fade so it can sample the real page. */
      view-transition-name:none;
    }
    html[data-reduced-motion="false"] .topbar[data-glass-on-dark="true"] {
      color:#f5f5f7;
    }
    html[data-reduced-motion="false"] .topbar[data-glass-on-dark="true"] .brand,
    html[data-reduced-motion="false"] .topbar[data-glass-on-dark="true"] nav {
      text-shadow:0 1px 3px #000b;
    }
    html[data-reduced-motion="false"] .liquid-glass {
      display:block;
      position:absolute;
      inset:7px var(--glass-inset);
      z-index:-1;
      pointer-events:none;
      border-radius:18px;
      background:rgb(255 255 255 / .025);
      -webkit-backdrop-filter:blur(10px) saturate(110%);
      backdrop-filter:var(--liquid-refraction,blur(10px) saturate(110%));
      box-shadow:inset 0 1px 0 #ffffff52,inset 0 -1px 0 #ffffff17,
        0 3px 12px #00000012;
    }
    html[data-reduced-motion="false"] .liquid-glass::before,
    html[data-reduced-motion="false"] .liquid-glass::after {
      content:'';
      position:absolute;
      inset:0;
      border-radius:inherit;
      pointer-events:none;
    }
    /* Specular rim stays separate from refraction, so labels never distort. */
    html[data-reduced-motion="false"] .liquid-glass::before {
      padding:1px;
      background:conic-gradient(from 120deg at var(--glass-x,35%) var(--glass-y,0%),
        #ffffff00,#ffffff61 12%,#ffffff00 30%,#ffffff00 48%,#ffffff42 63%,#ffffff00 80%);
      -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
      -webkit-mask-composite:xor;
      mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
      mask-composite:exclude;
    }
    html[data-reduced-motion="false"] .liquid-glass::after {
      background:radial-gradient(ellipse 220px 70px at var(--glass-x,35%) var(--glass-y,0%),
        #ffffff10,transparent 75%);
    }
    html[data-reduced-motion="false"] .topbar[data-glass-ready]::before {
      left:calc(var(--glass-inset) + 24px);
      width:calc(100% - 2 * var(--glass-inset) - 48px);
      bottom:7px;
    }
    html[data-reduced-motion="false"] .topbar[data-glass-ready] .theme-picker .select-trigger {
      color:inherit;
      background:transparent;
      border-color:transparent;
      border-radius:8px;
    }
    .liquid-glass-defs { display:block; position:absolute; width:0; height:0; pointer-events:none; }
  }
}

/* Root snapshots are viewport-sized; the shared header stays in place. */
.topbar {
  view-transition-name: site-header;
}
::view-transition {
  pointer-events: none;
}
::view-transition-group(root) {
  animation: none;
}
::view-transition-image-pair(root), ::view-transition-image-pair(site-header) {
  isolation: auto;
}
::view-transition-old(root), ::view-transition-new(root),
::view-transition-old(site-header), ::view-transition-new(site-header) {
  mix-blend-mode: normal;
}
/* Keep the old frame opaque below the incoming one: a single source-over
   fade avoids additive blending and resampling two moving full-screen layers. */
::view-transition-old(root), ::view-transition-old(site-header) {
  animation: none;
  opacity: 1;
}
::view-transition-group(site-header) {
  z-index: 1;
  animation: none;
}
::view-transition-new(root), ::view-transition-new(site-header) {
  animation: route-fade-in 360ms ease-in-out both;
}
@keyframes route-fade-in {
  from { opacity: 0; }
}

/* Brief cache hits do not flash a loading bar. Slow requests keep the old page. */
.topbar::before  {
  content: '';
  position: absolute;
  bottom: -1px;
  height: 2px;
  left: 0;
  width: 100%;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
  pointer-events: none;
}
.route-loading .topbar::before  {
  animation: route-progress 900ms var(--ease-out) 160ms forwards;
}
@keyframes route-progress  {
  from  {
    opacity: 1;
    transform: scaleX(.05);
  }
  to  {
    opacity: 1;
    transform: scaleX(.9);
  }
}
html[data-reduced-motion="true"] .select-options  {
  animation: none;
}
html[data-reduced-motion="true"]::view-transition-group(*),
html[data-reduced-motion="true"]::view-transition-old(*),
html[data-reduced-motion="true"]::view-transition-new(*) {
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
    animation: none !important;
  }
}
html[data-reduced-motion="true"] *, html[data-reduced-motion="true"] *::before, html[data-reduced-motion="true"] *::after  {
  animation: none !important;
  transition: none !important;
}
html[data-reduced-motion="true"] { scroll-behavior: auto; }
/* Reveal clips animate; icon rotations and sliced lettering are static geometry. */
html[data-reduced-motion="true"] .cut-reveal { clip-path: none !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .cut-reveal { clip-path: none !important; }
}