:root {
  --brand-core: #6B238E;
  --brand-hover: #5B1F82;
  --brand-pressed: #481764;
  --brand-luminous: #7A3FA0;
  --brand-mist: #F4F0F8;
  --brand-night: #1D1722;
  --ink: #17131C;
  --copy: #514A56;
  --muted: #756D79;
  --paper: #FCFBFD;
  --white: #FFFFFF;
  --arc-light: #B79CC8;
  --line: rgba(23, 19, 28, .10);
  --brand-line: rgba(107, 35, 142, .15);
  --shell: 1240px;
  --reading: 760px;
  --serif: "Source Han Serif SC", "Noto Serif CJK SC", "Songti SC", STSong, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.72;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { color: inherit; }
.shell { width: min(var(--shell), calc(100% - 80px)); margin-inline: auto; }
.skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--white);
  transform: translateY(-160%);
  transition: transform 160ms ease;
}
.skip-link:focus { transform: translateY(0); }
:is(a, button, input, summary):focus-visible {
  outline: 3px solid var(--brand-luminous);
  outline-offset: 2px;
}

.topbar {
  position: fixed;
  z-index: 100;
  inset: 0 0 auto;
  border-bottom: 1px solid var(--line);
  background: rgba(252, 251, 253, .98);
}
.topbar__inner { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.brand-lockup { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.brand-lockup img { width: 44px; height: 44px; flex: 0 0 44px; }
.brand-lockup span { display: block; min-width: 0; }
.brand-lockup strong { display: block; font-size: 14px; font-weight: 700; line-height: 1.25; }
.brand-lockup small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; line-height: 1.25; white-space: nowrap; }
.topbar__nav { display: flex; align-items: center; gap: 26px; color: var(--copy); font-size: 14px; }
.topbar__nav > a:not(.button) { position: relative; display: inline-flex; align-items: center; min-height: 44px; }
.topbar__nav > a:not(.button)::after { content: ""; position: absolute; right: 100%; bottom: 6px; left: 0; height: 2px; background: var(--brand-core); transition: right 180ms var(--ease); }
.topbar__nav > a:not(.button):hover { color: var(--brand-core); }
.topbar__nav > a:not(.button):hover::after { right: 0; }
.button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 22px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
.button--solid { background: var(--brand-core); color: var(--white); }
.button--solid:hover { background: var(--brand-hover); }
.button--solid:active { background: var(--brand-pressed); }
.button--outline { border-color: var(--brand-line); background: var(--white); color: var(--brand-core); }
.button--outline:hover { background: var(--brand-mist); }
.mobile-menu { display: none; }

.hero { padding: 154px 0 82px; min-height: 820px; display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(340px, .75fr); gap: clamp(56px, 7vw, 112px); align-items: center; }
.kicker, .chapter__no { margin: 0 0 18px; color: var(--brand-core); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.hero h1 {
  max-width: 820px;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(68px, 7.8vw, 112px);
  font-weight: 700;
  line-height: .96;
  letter-spacing: -.045em;
}
.hero h1 span { color: var(--brand-core); }
.hero__title--narrative { font-size: clamp(58px, 6.4vw, 92px) !important; line-height: .98 !important; }
.brand-arc { height: auto; object-fit: contain; }
.brand-arc--hero { width: min(410px, 54%); margin: 24px 0 22px 34%; animation: arc-reveal 480ms var(--ease) both; }
@keyframes arc-reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
.hero__lead { max-width: 720px; margin: 0; color: var(--copy); font-size: 20px; line-height: 1.78; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero__meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; max-width: 760px; margin: 52px 0 0; }
.hero__meta div { padding-top: 14px; border-top: 1px solid var(--line); }
.hero__meta dt { color: var(--muted); font-size: 12px; }
.hero__meta dd { margin: 4px 0 0; color: var(--ink); font-size: 14px; font-weight: 650; line-height: 1.5; }
.hero__mark { margin: 0; }
.hero__mark-stage { position: relative; min-height: 510px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; padding: 54px 42px 44px; border: 1px solid var(--brand-line); border-radius: 16px; background: var(--white); box-shadow: 0 12px 36px rgba(29, 23, 34, .08); }
.hero__mark-stage::after { display: none; }
.hero__mark-stage > img { width: min(292px, 78%); height: auto; }
.hero__index { position: absolute; top: 20px; right: 22px; color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; letter-spacing: .12em; }
.hero__mark-stage figcaption { max-width: 26ch; margin-top: 28px; color: var(--copy); font-size: 14px; text-align: center; }
.hero__mark-stage figcaption strong { color: var(--brand-core); }

.manifesto { background: var(--brand-night); color: var(--white); }
.manifesto__grid { min-height: 340px; display: grid; grid-template-columns: .6fr 1.6fr .8fr; gap: 48px; align-items: center; }
.manifesto__number { margin: 0; color: var(--arc-light); font-size: 15px; font-weight: 700; letter-spacing: .16em; }
.manifesto blockquote { margin: 0; font-family: var(--serif); font-size: clamp(40px, 4vw, 66px); font-weight: 650; line-height: 1.14; letter-spacing: -.02em; }
.manifesto__grid > p:last-child { margin: 0; color: #CFC8D5; font-size: 15px; line-height: 1.8; }

.manual { display: grid; grid-template-columns: 224px minmax(0, 1fr); gap: clamp(48px, 7vw, 96px); align-items: start; }
.toc { position: sticky; top: 98px; max-height: calc(100vh - 116px); overflow: auto; padding: 76px 0; scrollbar-width: thin; }
.toc > p { margin: 0 0 12px; color: var(--ink); font-size: 13px; font-weight: 700; }
.toc nav { padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.toc a { min-height: 39px; display: flex; align-items: center; gap: 12px; padding: 6px 8px; border-left: 2px solid transparent; color: var(--copy); font-size: 13px; line-height: 1.35; }
.toc a span { width: 20px; color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.toc a:hover, .toc a[aria-current="true"] { border-left-color: var(--brand-core); color: var(--brand-core); }
.manual__content { min-width: 0; }
.chapter { scroll-margin-top: 82px; padding: 112px 0; border-top: 1px solid var(--line); }
.chapter:first-child { border-top: 0; }
.chapter__header { max-width: var(--reading); margin-bottom: 52px; }
.chapter__header h2 { margin: 0 0 22px; font-family: var(--serif); font-size: clamp(44px, 5vw, 66px); font-weight: 650; line-height: 1.08; letter-spacing: -.03em; }
.chapter__header > p:last-child { margin: 0; color: var(--copy); font-size: 18px; line-height: 1.8; }
.chapter__header strong { color: var(--brand-core); }
.subhead { margin: 68px 0 24px; font-family: var(--serif); font-size: 30px; font-weight: 650; }
.fineprint { margin: 26px 0 0; color: var(--muted); font-size: 13px; }

.definition-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.definition-grid dl { display: grid; grid-template-columns: 128px 1fr; gap: 18px; margin: 0; padding: 20px 0; border-bottom: 1px solid var(--line); }
.definition-grid dl:nth-child(odd) { padding-right: 28px; }
.definition-grid dl:nth-child(even) { padding-left: 28px; border-left: 1px solid var(--line); }
.definition-grid dt { color: var(--muted); font-size: 13px; }
.definition-grid dd { margin: 0; color: var(--ink); font-size: 15px; font-weight: 600; line-height: 1.6; }
.formula { display: flex; align-items: stretch; margin: 56px 0; border: 1px solid var(--brand-line); background: var(--white); }
.formula span { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 94px; padding: 18px; color: var(--ink); font-size: 14px; font-weight: 650; text-align: center; }
.formula b { display: flex; align-items: center; color: var(--arc-light); font-family: var(--serif); font-size: 26px; }
.principles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 38px 42px; }
.principles article { padding-top: 18px; border-top: 1px solid var(--line); }
.principles article > span { color: var(--brand-core); font-size: 11px; font-weight: 700; }
.principles h3 { margin: 12px 0 7px; font-family: var(--serif); font-size: 24px; font-weight: 650; }
.principles p { margin: 0; color: var(--copy); font-size: 15px; }
.brand-roots { display: grid; grid-template-columns: minmax(220px, .68fr) minmax(0, 1.32fr); gap: clamp(42px, 6vw, 78px); margin: 62px 0; padding: 52px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.brand-roots__header > p { margin: 0 0 16px; color: var(--brand-core); font-size: 11px; font-weight: 750; letter-spacing: .16em; text-transform: uppercase; }
.brand-roots__header h3 { margin: 0; font-family: var(--serif); font-size: clamp(36px, 4vw, 54px); font-weight: 650; line-height: 1.12; letter-spacing: -.03em; }
.brand-roots__stories { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; }
.brand-roots__stories article { padding-top: 18px; border-top: 2px solid var(--brand-core); }
.brand-roots__stories span { color: var(--brand-core); font-size: 11px; font-weight: 700; }
.brand-roots__stories h4 { margin: 16px 0 10px; font-family: var(--serif); font-size: 23px; font-weight: 650; }
.brand-roots__stories p { margin: 0; color: var(--copy); font-size: 14px; line-height: 1.82; }
.brand-roots__stories code { color: var(--brand-core); font-family: var(--sans); font-size: .92em; }
.lucky-code { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 24px; align-items: center; margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--line); }
.lucky-code > span { color: rgba(107, 35, 142, .18); font-family: var(--serif); font-size: 72px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.lucky-code strong { color: var(--ink); font-family: var(--serif); font-size: 21px; }
.lucky-code p { margin: 6px 0 0; color: var(--copy); font-size: 13px; line-height: 1.75; }

.case-ledger { display: grid; gap: 74px; }
.case-study { display: grid; grid-template-columns: minmax(0, 1.16fr) minmax(310px, .84fr); gap: clamp(38px, 5vw, 68px); align-items: center; }
.case-study:nth-child(even) figure { order: 2; }
.case-study figure { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--brand-line); background: var(--white); }
.case-study figure img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.case-study__meta { margin: 0 0 18px; color: var(--muted); font-size: 11px; font-weight: 650; line-height: 1.6; letter-spacing: .03em; }
.case-study__meta span { display: inline-flex; margin-right: 8px; padding: 3px 7px; border-radius: 5px; background: var(--brand-mist); color: var(--brand-core); font-weight: 800; letter-spacing: .08em; }
.case-study h3 { margin: 0 0 24px; font-family: var(--serif); font-size: clamp(28px, 3vw, 38px); font-weight: 650; line-height: 1.18; letter-spacing: -.025em; }
.case-study dl { margin: 0; border-top: 1px solid var(--line); }
.case-study dl div { display: grid; grid-template-columns: 72px 1fr; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.case-study dt { color: var(--brand-core); font-size: 12px; font-weight: 750; }
.case-study dd { margin: 0; color: var(--copy); font-size: 13px; line-height: 1.75; }
.case-study__notice { margin: 18px 0 0; padding: 13px 15px; border-left: 3px solid var(--brand-core); background: var(--brand-mist); color: var(--brand-core); font-size: 12px; font-weight: 650; line-height: 1.65; }
.relation-system { margin-top: 110px; border-top: 1px solid var(--line); }
.relation-system > header { display: grid; grid-template-columns: 120px minmax(260px, .8fr) minmax(280px, 1.2fr); gap: 28px; align-items: end; padding: 42px 0 32px; }
.relation-system > header p { margin: 0; color: var(--brand-core); font-size: 11px; font-weight: 800; letter-spacing: .13em; }
.relation-system > header h3 { margin: 0; font-family: var(--serif); font-size: clamp(28px, 3vw, 40px); font-weight: 650; line-height: 1.15; }
.relation-system > header span { color: var(--copy); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; overflow-wrap: anywhere; }
.relation-system__rows { border-top: 1px solid var(--line); }
.relation-system__rows article { display: grid; grid-template-columns: 70px minmax(0, 1fr) 150px; gap: 24px; align-items: start; padding: 26px 0; border-bottom: 1px solid var(--line); }
.relation-system__rows article > span { color: rgba(107,35,142,.3); font-family: var(--serif); font-size: 34px; line-height: 1; }
.relation-system__rows h4 { margin: 0; color: var(--ink); font-family: var(--serif); font-size: 21px; font-weight: 650; }
.relation-system__rows p { max-width: 700px; margin: 7px 0 0; color: var(--copy); font-size: 13px; line-height: 1.75; }
.relation-system__rows strong { color: var(--brand-core); font-size: 12px; font-weight: 750; text-align: right; }
.ceremony-rule { display: grid; grid-template-columns: minmax(300px, .9fr) minmax(0, 1.1fr); margin-top: 90px; }
.ceremony-rule__statement { min-height: 430px; display: flex; flex-direction: column; justify-content: space-between; padding: 42px; background: var(--brand-night); color: var(--white); }
.ceremony-rule__statement span { color: var(--arc-light); font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.ceremony-rule__statement h3 { margin: auto 0 26px; font-family: var(--serif); font-size: clamp(34px, 4vw, 50px); font-weight: 650; line-height: 1.12; }
.ceremony-rule__statement p { margin: 0; color: #CFC8D5; font-size: 14px; line-height: 1.8; }
.ceremony-rule__rules { display: grid; align-content: center; padding: 34px 46px; border: 1px solid var(--line); border-left: 0; background: var(--white); }
.ceremony-rule__rules p { display: grid; grid-template-columns: 158px 1fr; gap: 18px; margin: 0; padding: 20px 0; border-bottom: 1px solid var(--line); color: var(--copy); font-size: 13px; line-height: 1.7; }
.ceremony-rule__rules p:last-child { border-bottom: 0; }
.ceremony-rule__rules strong { color: var(--brand-core); font-size: 12px; }

.logo-stage { position: relative; min-height: 320px; display: flex; align-items: center; justify-content: center; padding: 64px; overflow: hidden; }
.logo-stage img { width: min(680px, 82%); max-height: 190px; }
.logo-stage p { position: absolute; right: 20px; bottom: 15px; margin: 0; font-size: 11px; }
.logo-stage--light { border: 1px solid var(--brand-line); background: var(--white); }
.logo-stage--light p { color: var(--muted); }
.logo-stage--dark { margin-top: 20px; background: var(--brand-night); }
.logo-stage--dark p { color: #BEB7C8; }
.spec-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: 48px; background: var(--line); border: 1px solid var(--line); }
.spec-grid article { min-height: 178px; padding: 26px; background: var(--paper); }
.spec-grid__label { margin: 0 0 22px; color: var(--muted); font-size: 12px; }
.spec-grid strong { display: block; margin-bottom: 8px; color: var(--brand-core); font-family: var(--serif); font-size: 23px; font-weight: 650; }
.spec-grid small { color: var(--copy); font-size: 14px; }
.construction { display: grid; grid-template-columns: minmax(280px, .7fr) minmax(0, 1.3fr); gap: 52px; align-items: center; margin-top: 62px; }
.construction__mark { text-align: center; }
.safe-zone { position: relative; width: min(300px, 90%); aspect-ratio: 1; display: grid; place-items: center; margin-inline: auto; border: 1px dashed var(--brand-luminous); background: var(--white); }
.safe-zone::before, .safe-zone::after { content: ""; position: absolute; background: var(--brand-line); pointer-events: none; }
.safe-zone::before { top: 0; bottom: 0; left: 50%; width: 1px; }
.safe-zone::after { top: 50%; right: 0; left: 0; height: 1px; }
.safe-zone img { width: 74%; }
.construction__mark p { color: var(--muted); font-size: 12px; }
.construction dl { margin: 0; }
.construction dl div { display: grid; grid-template-columns: 130px 1fr; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.construction dt { color: var(--muted); font-size: 13px; }
.construction dd { margin: 0; color: var(--ink); font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.dont-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.dont-grid article { min-width: 0; }
.dont-sample { position: relative; min-height: 170px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line); background: var(--white); }
.dont-sample::after { content: ""; position: absolute; width: 120%; height: 3px; background: #B3261E; transform: rotate(-38deg); }
.dont-sample img { width: 108px; }
.dont-sample--stretch img { transform: scaleX(1.35) scaleY(.75); }
.dont-sample--shadow img { filter: drop-shadow(12px 14px 5px rgba(23, 19, 28, .45)); }
.dont-sample--tint img { filter: hue-rotate(100deg) saturate(1.8); }
.dont-sample--crop img { width: 168px; transform: scale(1.45); }
.dont-grid p { margin: 10px 0 0; color: var(--copy); font-size: 13px; }
.rule-callout { max-width: var(--reading); margin-top: 48px; padding: 22px 0 22px 22px; border-left: 3px solid var(--brand-core); }
.rule-callout strong { color: var(--brand-core); font-size: 14px; }
.rule-callout p { margin: 6px 0 0; color: var(--copy); font-size: 15px; }
.rule-callout code { padding: 2px 5px; border-radius: 4px; background: var(--brand-mist); color: var(--brand-core); }

.swatches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.swatch { min-height: 168px; display: flex; flex-direction: column; justify-content: space-between; padding: 22px; border: 1px solid var(--line); }
.swatch span { display: block; margin-bottom: 3px; font-size: 11px; opacity: .76; }
.swatch strong { font-family: var(--serif); font-size: 25px; font-weight: 650; }
.swatch button { align-self: flex-start; padding: 5px 8px; border: 1px solid currentColor; border-radius: 6px; background: transparent; color: inherit; font-size: 12px; cursor: pointer; }
.swatch--core { background: #6B238E; color: var(--white); }
.swatch--luminous { background: #7A3FA0; color: var(--white); }
.swatch--mist { background: #F4F0F8; color: var(--ink); }
.swatch--night { background: #1D1722; color: var(--white); }
.swatch--ink { background: #17131C; color: var(--white); }
.swatch--paper { background: #FCFBFD; color: var(--ink); }
.swatch--white { background: #FFFFFF; color: var(--ink); }
.swatch--arc { background: #B79CC8; color: #17131C; }
.ratio-panel { margin-top: 44px; padding: 30px; border: 1px solid var(--brand-line); background: var(--white); }
.ratio-bar { height: 28px; display: flex; overflow: hidden; border: 1px solid var(--line); }
.ratio-bar__paper { flex: 82; background: var(--paper); }
.ratio-bar__ink { flex: 12; background: var(--ink); }
.ratio-bar__purple { flex: 6; background: var(--brand-core); }
.ratio-panel dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 22px 0 0; }
.ratio-panel dt { color: var(--ink); font-size: 20px; font-weight: 750; font-variant-numeric: tabular-nums; }
.ratio-panel dd { margin: 0; color: var(--muted); font-size: 12px; }
.semantic-colors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: 36px; background: var(--line); border: 1px solid var(--line); }
.semantic-colors article { padding: 20px; background: var(--paper); }
.semantic-colors i { display: block; width: 20px; height: 6px; margin-bottom: 15px; border-radius: 999px; background: var(--state); }
.semantic-colors strong, .semantic-colors code { display: block; }
.semantic-colors code { margin-top: 2px; color: var(--muted); font-size: 11px; }
.semantic-colors p { margin: 9px 0 0; color: var(--copy); font-size: 12px; }
.subbrand-colors { display: grid; grid-template-columns: 150px repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 48px; padding: 30px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.subbrand-colors > p { margin: 0; color: var(--brand-core); font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.subbrand-colors strong, .subbrand-colors span { display: block; }
.subbrand-colors strong { font-family: var(--serif); font-size: 19px; }
.subbrand-colors span { margin-top: 8px; color: var(--copy); font-size: 13px; line-height: 1.75; }

.type-specimen { display: grid; grid-template-columns: 1.1fr .9fr; border: 1px solid var(--line); }
.type-specimen article { min-height: 340px; display: flex; flex-direction: column; justify-content: space-between; padding: 34px; }
.type-specimen article + article { border-left: 1px solid var(--line); }
.type-specimen small { color: var(--brand-core); font-size: 12px; font-weight: 700; }
.type-specimen p { margin: 40px 0; }
.type-specimen__serif p { font-family: var(--serif); font-size: clamp(46px, 5vw, 72px); font-weight: 650; line-height: 1.1; letter-spacing: -.03em; }
.type-specimen__sans p { color: var(--copy); font-size: 22px; line-height: 1.8; }
.type-specimen footer { color: var(--muted); font-size: 11px; }
.type-scale { margin-top: 34px; border-top: 1px solid var(--line); }
.type-scale div { display: grid; grid-template-columns: 180px 1fr; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.type-scale span { color: var(--muted); font-size: 13px; }
.type-scale strong { font-size: 14px; font-weight: 650; }

.grid-demo { display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px; min-height: 260px; padding: 20px; border: 1px solid var(--brand-line); background: var(--white); }
.grid-demo span { display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px; background: var(--brand-mist); color: var(--brand-core); font-size: 9px; }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 32px; background: var(--line); border: 1px solid var(--line); }
.metric-grid article { min-height: 164px; padding: 24px; background: var(--paper); }
.metric-grid strong { color: var(--brand-core); font-family: var(--serif); font-size: 36px; font-weight: 650; }
.metric-grid p { margin: 12px 0 0; color: var(--copy); font-size: 13px; }
.material-table { margin-top: 40px; border-top: 1px solid var(--line); }
.material-table div { display: grid; grid-template-columns: 90px minmax(260px, 1fr) minmax(220px, 1fr); gap: 24px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); }
.material-table span { color: var(--muted); font-size: 13px; }
.material-table code { color: var(--brand-core); font-size: 12px; overflow-wrap: anywhere; }
.material-table p { margin: 0; color: var(--copy); font-size: 13px; }

.arc-stage { position: relative; min-height: 340px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--brand-line); background: var(--white); }
.arc-stage > img { width: 110%; height: auto; }
.arc-stage__line { position: absolute; inset: 50% 9% auto; border-top: 1px dashed var(--arc-light); }
.arc-stage p { position: absolute; right: 24px; bottom: 16px; margin: 0; color: var(--muted); font-size: 11px; }
.arc-assets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: 18px; border: 1px solid var(--line); background: var(--line); }
.arc-assets a { min-width: 0; padding: 24px 20px; background: var(--white); }
.arc-assets a > img { width: 100%; height: 54px; object-fit: contain; }
.arc-assets__dark { background: var(--brand-night) !important; color: var(--white); }
.arc-assets strong, .arc-assets small { display: block; }
.arc-assets strong { margin-top: 18px; font-size: 13px; }
.arc-assets small { margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.arc-assets__dark small { color: #BEB7C8; }
.persona-quote { max-width: 880px; margin: 0 0 42px; padding: 0 0 0 26px; border-left: 4px solid var(--brand-core); }
.persona-quote p { margin: 0; font-family: var(--serif); font-size: clamp(34px, 4.4vw, 58px); font-weight: 650; line-height: 1.15; letter-spacing: -.03em; }
.persona-quote cite { display: block; margin-top: 16px; color: var(--copy); font-size: 15px; font-style: normal; }
.r-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 34px; background: var(--line); border: 1px solid var(--line); }
.r-modes article { min-height: 250px; padding: 28px; background: var(--paper); }
.r-modes article > span { display: inline-flex; padding: 3px 7px; border-radius: 6px; background: var(--brand-mist); color: var(--brand-core); font-size: 11px; font-weight: 700; }
.r-modes h3 { margin: 22px 0 4px; font-family: var(--serif); font-size: 23px; }
.r-modes strong { color: var(--brand-core); font-size: 32px; font-variant-numeric: tabular-nums; }
.r-modes p { margin: 12px 0 0; color: var(--copy); font-size: 13px; }

.imagery-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.imagery-rules article { min-height: 320px; padding: 30px; border-top: 3px solid var(--brand-core); background: var(--white); }
.imagery-rules article:last-child { border-top-color: var(--ink); }
.tag { display: inline-flex; margin: 0; padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; }
.tag--yes { background: #E7F4EF; color: #137A5A; }
.tag--no { background: #F9E9E7; color: #B3261E; }
.imagery-rules h3 { margin: 24px 0 18px; font-family: var(--serif); font-size: 26px; }
.imagery-rules ul, .data-demo ul { margin: 0; padding-left: 20px; color: var(--copy); font-size: 14px; }
.imagery-rules li, .data-demo li { margin: 7px 0; }
.motion-spec { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 36px; }
.motion-spec div { padding: 18px 0; border-top: 1px solid var(--line); }
.motion-spec span { display: block; color: var(--muted); font-size: 11px; }
.motion-spec strong { display: block; margin-top: 4px; color: var(--ink); font-size: 13px; }

.application { padding: 72px 0; border-top: 1px solid var(--line); }
.application:first-of-type { padding-top: 0; border-top: 0; }
.application__head { display: grid; grid-template-columns: 76px 1fr; gap: 24px; align-items: start; margin-bottom: 34px; }
.application__head > span { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 28px; border-radius: 7px; background: var(--brand-core); color: var(--white); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.application__head h3 { margin: 0 0 4px; font-family: var(--serif); font-size: 34px; font-weight: 650; }
.application__head p { margin: 0; color: var(--copy); font-size: 15px; }
.application__rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 34px; border-top: 1px solid var(--line); }
.application__rules dl { display: grid; grid-template-columns: 82px 1fr; gap: 16px; margin: 0; padding: 18px 0; border-bottom: 1px solid var(--line); }
.application__rules dl:nth-child(odd) { padding-right: 24px; }
.application__rules dl:nth-child(even) { padding-left: 24px; border-left: 1px solid var(--line); }
.application__rules dt { color: var(--brand-core); font-size: 12px; font-weight: 700; }
.application__rules dd { margin: 0; color: var(--copy); font-size: 13px; }
.web-mock { aspect-ratio: 16/9; overflow: hidden; border: 1px solid var(--brand-line); border-radius: 12px; background: var(--white); box-shadow: 0 12px 36px rgba(29, 23, 34, .07); }
.web-mock > header { height: 10%; display: flex; align-items: center; gap: 18px; padding: 0 4%; border-bottom: 1px solid var(--line); }
.web-mock header img { width: 28px; height: 28px; }
.web-mock header span { flex: 1; }
.web-mock header i { width: 8%; height: 5px; border-radius: 99px; background: #D8D3DE; }
.web-mock header b { width: 12%; height: 28px; border-radius: 7px; background: var(--brand-core); }
.web-mock__body { position: relative; height: 90%; display: flex; flex-direction: column; justify-content: center; padding: 7% 10%; }
.web-mock__body::after { content: ""; position: absolute; right: 7%; width: 30%; aspect-ratio: 1; border: 1px solid var(--brand-line); background: var(--brand-mist); }
.web-mock__body small { color: var(--brand-core); font-size: clamp(8px, 1vw, 12px); font-weight: 700; }
.web-mock__body strong { position: relative; z-index: 1; margin-top: 2%; font-family: var(--serif); font-size: clamp(28px, 5vw, 64px); line-height: 1.02; }
.web-mock .mock-arc { width: 24%; height: auto; margin: 2% 0 1% 17%; }
.web-mock__body button { align-self: flex-start; padding: 8px 14px; border: 0; border-radius: 7px; background: var(--brand-core); color: var(--white); font-size: clamp(7px, 1vw, 11px); }
.app-mock { aspect-ratio: 16/9; display: grid; grid-template-columns: 25% 75%; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--white); box-shadow: 0 12px 36px rgba(29, 23, 34, .08); }
.app-mock aside { position: relative; display: flex; flex-direction: column; gap: 3%; padding: 7% 7% 5%; background: var(--brand-mist); }
.app-mock__traffic { position: absolute; top: 4%; left: 7%; display: flex; gap: 5px; }
.app-mock__traffic i { width: 7px; height: 7px; border-radius: 50%; background: #D8D3DE; }
.app-mock aside img { width: 34px; height: 34px; margin: 4% 0 9%; }
.app-mock aside > span { padding: 5% 7%; border-radius: 6px; color: var(--copy); font-size: clamp(7px, 1vw, 11px); }
.app-mock aside > span.is-active { background: var(--white); color: var(--brand-core); font-weight: 700; }
.app-mock__main { display: flex; flex-direction: column; padding: 9% 9% 7%; }
.app-mock__main > small { color: var(--muted); font-size: clamp(7px, 1vw, 11px); }
.app-mock__main > strong { margin-top: 1%; font-family: var(--serif); font-size: clamp(24px, 4vw, 50px); line-height: 1.1; }
.app-mock__status { display: flex; align-items: center; gap: 8px; margin-top: 7%; padding: 3%; border: 1px solid var(--line); border-radius: 8px; }
.app-mock__status i { width: 7px; height: 7px; border-radius: 50%; background: #137A5A; }
.app-mock__status span { flex: 1; color: var(--copy); font-size: clamp(7px, 1vw, 11px); }
.app-mock__status b { color: #137A5A; font-size: clamp(6px, .9vw, 10px); }
.app-mock__rows { display: grid; gap: 9px; margin-top: 5%; }
.app-mock__rows span { height: 5px; border-radius: 99px; background: #E6E2E8; }
.app-mock__rows span:nth-child(2) { width: 76%; }
.app-mock__rows span:nth-child(3) { width: 58%; }
.app-mock__main button { align-self: flex-end; margin-top: auto; padding: 8px 16px; border: 0; border-radius: 7px; background: var(--brand-core); color: var(--white); font-size: clamp(7px, 1vw, 11px); }
.slides { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.slide { position: relative; aspect-ratio: 16/9; overflow: hidden; padding: 7%; border: 1px solid var(--brand-line); background: var(--white); box-shadow: 0 10px 28px rgba(29, 23, 34, .06); }
.slide--cover img { width: 24px; height: 24px; }
.slide--cover strong { position: absolute; top: 35%; left: 9%; font-family: var(--serif); font-size: clamp(14px, 2vw, 27px); line-height: 1.1; }
.slide--cover .slide__arc { position: absolute; right: -5%; bottom: 19%; width: 48%; height: auto; }
.slide--cover small { position: absolute; right: 7%; bottom: 7%; color: var(--muted); font-size: 6px; }
.slide--statement { background: var(--brand-night); color: var(--white); }
.slide--statement span { color: var(--arc-light); font-size: 8px; }
.slide--statement strong { position: absolute; top: 31%; left: 9%; font-family: var(--serif); font-size: clamp(14px, 2vw, 26px); line-height: 1.13; }
.slide--statement small { position: absolute; right: 8%; bottom: 8%; color: #BEB7C8; font-size: 6px; }
.slide--data > small { color: var(--brand-core); font-size: 7px; font-weight: 700; }
.slide--data > strong { display: block; margin-top: 5%; color: var(--brand-core); font-family: var(--serif); font-size: clamp(32px, 4vw, 56px); line-height: 1; }
.slide--data p { margin: 3% 0 0; color: var(--copy); font-size: 7px; line-height: 1.5; }
.slide--data > div { position: absolute; right: 8%; bottom: 12%; left: 50%; height: 42%; display: flex; align-items: flex-end; gap: 8%; }
.slide--data i { flex: 1; background: #D8D3DE; }
.slide--data i:nth-child(1) { height: 35%; }.slide--data i:nth-child(2) { height: 58%; }.slide--data i:nth-child(3) { height: 88%; background: var(--brand-core); }.slide--data i:nth-child(4) { height: 66%; }
.cross-media { margin-top: 54px; overflow-x: auto; }
.cross-media table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 13px; }
.cross-media caption { padding: 0 0 14px; color: var(--ink); font-family: var(--serif); font-size: 24px; font-weight: 650; text-align: left; }
.cross-media th, .cross-media td { padding: 15px; border-bottom: 1px solid var(--line); text-align: left; }
.cross-media thead th { color: var(--brand-core); font-size: 12px; }
.cross-media tbody th { color: var(--muted); font-weight: 500; }

.data-demo { display: grid; grid-template-columns: 1.2fr .8fr; gap: 54px; align-items: center; }
.data-demo__chart { position: relative; height: 360px; display: flex; align-items: flex-end; gap: 10%; padding: 40px 7% 54px; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.data-demo__chart > span { flex: 1; position: relative; height: var(--h); background: #D8D3DE; }
.data-demo__chart > span.is-core { background: var(--brand-core); }
.data-demo__chart span i { position: absolute; top: 100%; left: 50%; padding-top: 10px; color: var(--muted); font-size: 10px; font-style: normal; transform: translateX(-50%); }
.data-demo__target { position: absolute; right: 0; left: 0; bottom: 76%; border-top: 2px dashed var(--arc-light); color: var(--brand-core); font-size: 10px; font-weight: 500; text-align: right; }
.data-demo > div:last-child > strong { font-family: var(--serif); font-size: 28px; }
.data-demo > div:last-child ul { margin-top: 22px; }

.access-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.access-grid article { min-height: 220px; padding: 28px; background: var(--paper); }
.access-grid article > strong { color: var(--brand-core); font-family: var(--serif); font-size: 38px; font-weight: 650; }
.access-grid h3 { margin: 18px 0 8px; font-family: var(--serif); font-size: 22px; }
.access-grid p { margin: 0; color: var(--copy); font-size: 14px; }
.focus-demo { display: grid; grid-template-columns: 180px 1fr; gap: 28px; align-items: center; margin-top: 38px; padding: 30px; border: 1px solid var(--brand-line); background: var(--white); }
.focus-demo button { min-height: 44px; border: 1px solid var(--brand-luminous); border-radius: 9px; background: var(--white); color: var(--brand-core); outline: 3px solid var(--brand-luminous); outline-offset: 2px; }
.focus-demo p { margin: 0; color: var(--copy); font-size: 14px; }

.prompt-block { overflow: hidden; border: 1px solid rgba(242, 237, 255, .14); background: var(--brand-night); color: #F7F4FA; }
.prompt-block__head { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 18px; border-bottom: 1px solid rgba(242, 237, 255, .12); }
.prompt-block__head span { font-size: 13px; font-weight: 700; }
.prompt-block__head button { min-height: 34px; padding: 6px 12px; border: 1px solid rgba(242, 237, 255, .25); border-radius: 7px; background: transparent; color: #F7F4FA; font-size: 12px; cursor: pointer; }
.prompt-block pre { margin: 0; padding: 28px; overflow: auto; color: #D7D0DC; font-family: var(--sans); font-size: 13px; line-height: 1.85; white-space: pre-wrap; }

.governance-layers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.governance-layers article { min-height: 250px; padding: 26px; border-top: 3px solid var(--brand-core); background: var(--white); }
.governance-layers span { color: var(--brand-core); font-size: 11px; font-weight: 700; }
.governance-layers h3 { margin: 22px 0 8px; font-family: var(--serif); font-size: 23px; }
.governance-layers p { margin: 0; color: var(--copy); font-size: 13px; }
.checklist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 28px; margin-top: 42px; border-top: 1px solid var(--line); }
.checklist label { display: flex; gap: 12px; align-items: flex-start; padding: 15px 0; border-bottom: 1px solid var(--line); color: var(--copy); font-size: 13px; cursor: pointer; }
.checklist input { width: 18px; height: 18px; flex: 0 0 18px; margin: 1px 0 0; accent-color: var(--brand-core); }

.chapter--assets { padding-bottom: 142px; }
.asset-list { border-top: 1px solid var(--line); }
.asset-list a { display: grid; grid-template-columns: 64px 1fr auto; gap: 22px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--line); }
.asset-list a > span { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 32px; border-radius: 7px; background: var(--brand-mist); color: var(--brand-core); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.asset-list strong, .asset-list small { display: block; }
.asset-list strong { font-family: var(--serif); font-size: 20px; font-weight: 650; }
.asset-list small { margin-top: 3px; color: var(--muted); font-size: 12px; }
.asset-list b { color: var(--brand-core); font-size: 13px; }
.asset-list a:hover strong { color: var(--brand-core); }
.asset-note { display: grid; grid-template-columns: 128px 1fr; gap: 32px; align-items: center; margin-top: 46px; padding: 32px; border: 1px solid var(--brand-line); background: var(--white); }
.asset-note img { width: 128px; }
.asset-note strong { font-family: var(--serif); font-size: 24px; }
.asset-note p { margin: 8px 0 0; color: var(--copy); font-size: 14px; }

.footer { position: relative; min-height: 430px; overflow: hidden; background: var(--brand-night); color: var(--white); }
.footer__inner { position: relative; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 48px; padding-top: 90px; }
.footer__inner img { width: 196px; max-height: 58px; }
.footer__inner > div:first-child p { margin: 18px 0 0; color: #BEB7C8; font-family: var(--serif); font-size: 18px; }
.footer__inner > div:last-child { text-align: right; }
.footer__inner > div:last-child p { margin: 0; color: #BEB7C8; font-size: 12px; }
.footer__inner > div:last-child a { display: block; margin-top: 10px; font-family: var(--serif); font-size: 32px; }
.footer__inner > div:last-child small { display: block; margin-top: 6px; color: #8F8796; }
.footer__arc { position: absolute; right: -3%; bottom: -12px; width: 86%; height: auto; }
.copy-toast { position: fixed; z-index: 1000; right: 22px; bottom: 22px; padding: 10px 14px; border-radius: 8px; background: var(--ink); color: var(--white); font-size: 12px; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 160ms ease, transform 160ms ease; }
.copy-toast.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1100px) {
  .shell { width: min(var(--shell), calc(100% - 56px)); }
  .hero { min-height: 760px; }
  .hero__grid { grid-template-columns: minmax(0, 1.12fr) minmax(300px, .88fr); gap: 52px; }
  .hero__mark-stage { min-height: 460px; padding-inline: 30px; }
  .manifesto__grid { grid-template-columns: .45fr 1.55fr .8fr; gap: 34px; }
  .manual { grid-template-columns: 196px minmax(0, 1fr); gap: 48px; }
  .dont-grid { grid-template-columns: repeat(2, 1fr); }
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .semantic-colors { grid-template-columns: repeat(2, 1fr); }
  .relation-system > header { grid-template-columns: 100px minmax(220px, .8fr) minmax(240px, 1.2fr); gap: 20px; }
}

@media (max-width: 860px) {
  html { scroll-padding-top: 74px; }
  .shell { width: min(var(--shell), calc(100% - 40px)); }
  .topbar__inner { min-height: 68px; }
  .topbar__nav { display: none; }
  .mobile-menu { position: relative; display: block; }
  .mobile-menu summary { min-height: 40px; display: inline-flex; align-items: center; padding: 7px 12px; border: 1px solid var(--brand-line); border-radius: 8px; color: var(--brand-core); font-size: 13px; font-weight: 700; cursor: pointer; list-style: none; }
  .mobile-menu summary::-webkit-details-marker { display: none; }
  .mobile-menu[open] nav { position: absolute; top: 48px; right: 0; width: 210px; display: grid; padding: 10px; border: 1px solid var(--brand-line); border-radius: 10px; background: var(--white); box-shadow: 0 12px 36px rgba(29,23,34,.10); }
  .mobile-menu nav a { padding: 9px 10px; color: var(--copy); font-size: 13px; }
  .hero { min-height: auto; padding: 128px 0 72px; }
  .hero__grid { grid-template-columns: 1fr; gap: 62px; }
  .hero h1 { font-size: clamp(68px, 12vw, 92px); }
  .hero__mark { width: min(520px, 82%); margin-inline: auto; }
  .manifesto__grid { min-height: 460px; grid-template-columns: 1fr; gap: 18px; align-content: center; }
  .manifesto blockquote { font-size: clamp(40px, 7vw, 58px); }
  .manifesto__grid > p:last-child { max-width: 56ch; }
  .manual { display: block; }
  .toc { display: none; }
  .chapter { padding: 88px 0; }
  .chapter__header { margin-bottom: 42px; }
  .brand-roots { grid-template-columns: 1fr; }
  .case-study { grid-template-columns: 1fr; gap: 28px; }
  .case-study:nth-child(even) figure { order: 0; }
  .relation-system > header { grid-template-columns: 1fr; align-items: start; }
  .relation-system__rows article { grid-template-columns: 54px minmax(0, 1fr) 126px; }
  .ceremony-rule { grid-template-columns: 1fr; }
  .ceremony-rule__statement { min-height: 360px; }
  .ceremony-rule__rules { border-top: 0; border-left: 1px solid var(--line); }
  .application { padding: 62px 0; }
  .slides { grid-template-columns: 1fr 1fr; }
  .slides .slide:last-child { grid-column: 1 / -1; width: 50%; justify-self: center; }
  .governance-layers { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .shell { width: min(var(--shell), calc(100% - 40px)); }
  .brand-lockup img { width: 38px; height: 38px; flex-basis: 38px; }
  .brand-lockup small { display: none; }
  .hero { padding-top: 116px; }
  .hero h1 { font-size: clamp(58px, 17vw, 78px); line-height: .98; }
  .brand-arc--hero { width: 62%; margin-left: 30%; }
  .hero__lead { font-size: 18px; }
  .hero__actions { display: grid; }
  .hero__actions .button { width: 100%; }
  .hero__meta { grid-template-columns: 1fr; gap: 12px; margin-top: 42px; }
  .hero__mark { width: 100%; }
  .hero__mark-stage { min-height: 420px; overflow: hidden; padding: 48px 28px 38px; }
  .hero__mark-stage > img { width: min(250px, 76%); }
  .hero__mark-stage::after { bottom: 56px; }
  .manifesto__grid { min-height: 500px; }
  .manifesto blockquote { font-size: 40px; }
  .chapter { padding: 76px 0; }
  .chapter__header h2 { font-size: 46px; }
  .chapter__header > p:last-child { font-size: 17px; }
  .definition-grid, .principles, .spec-grid, .swatches, .imagery-rules, .application__rules, .access-grid, .checklist { grid-template-columns: 1fr; }
  .brand-roots { gap: 34px; padding: 40px 0; }
  .brand-roots__stories { grid-template-columns: 1fr; }
  .case-ledger { gap: 58px; }
  .case-study__meta span { display: table; margin: 0 0 7px; }
  .relation-system { margin-top: 84px; }
  .relation-system__rows article { grid-template-columns: 42px 1fr; gap: 14px; }
  .relation-system__rows article > strong { grid-column: 2; text-align: left; }
  .ceremony-rule { margin-top: 72px; }
  .ceremony-rule__statement { min-height: 340px; padding: 32px; }
  .ceremony-rule__rules { padding: 24px 30px; }
  .ceremony-rule__rules p { grid-template-columns: 1fr; gap: 7px; }
  .definition-grid dl { grid-template-columns: 98px 1fr; }
  .definition-grid dl:nth-child(odd), .definition-grid dl:nth-child(even) { padding-right: 0; padding-left: 0; border-left: 0; }
  .formula { display: grid; grid-template-columns: 1fr; }
  .formula span { min-height: 64px; }
  .formula b { justify-content: center; height: 20px; }
  .logo-stage { min-height: 240px; padding: 42px 24px; }
  .logo-stage img { width: 100%; }
  .construction { grid-template-columns: 1fr; gap: 32px; }
  .construction dl div { grid-template-columns: 110px 1fr; }
  .dont-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .dont-sample { min-height: 142px; }
  .dont-sample img { width: 90px; }
  .ratio-panel { padding: 20px; }
  .ratio-panel dl { grid-template-columns: 1fr; gap: 10px; }
  .semantic-colors { grid-template-columns: 1fr 1fr; }
  .subbrand-colors { grid-template-columns: 1fr; gap: 24px; }
  .type-specimen { grid-template-columns: 1fr; }
  .type-specimen article { min-height: 290px; padding: 26px; }
  .type-specimen article + article { border-top: 1px solid var(--line); border-left: 0; }
  .type-scale div { grid-template-columns: 1fr; gap: 5px; }
  .grid-demo { grid-template-columns: repeat(6, 1fr); min-height: 330px; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .material-table div { grid-template-columns: 1fr; gap: 6px; }
  .arc-stage { min-height: 250px; }
  .arc-assets { grid-template-columns: 1fr 1fr; }
  .persona-quote { padding-left: 20px; }
  .r-modes { grid-template-columns: 1fr; }
  .r-modes article { min-height: auto; }
  .motion-spec { grid-template-columns: 1fr 1fr; }
  .application__head { grid-template-columns: 1fr; gap: 12px; }
  .application__rules dl:nth-child(odd), .application__rules dl:nth-child(even) { padding-right: 0; padding-left: 0; border-left: 0; }
  .web-mock, .app-mock { border-radius: 9px; }
  .slides { grid-template-columns: 1fr; }
  .slides .slide:last-child { grid-column: auto; width: 100%; }
  .slide--cover strong, .slide--statement strong { font-size: 24px; }
  .slide--data > strong { font-size: 52px; }
  .data-demo { grid-template-columns: 1fr; gap: 36px; }
  .data-demo__chart { height: 300px; }
  .focus-demo { grid-template-columns: 1fr; }
  .prompt-block pre { padding: 20px; font-size: 12px; }
  .asset-list a { grid-template-columns: 54px 1fr; gap: 16px; }
  .asset-list a > b { grid-column: 2; }
  .asset-note { grid-template-columns: 1fr; text-align: center; }
  .asset-note img { margin-inline: auto; }
  .footer { min-height: 480px; }
  .footer__inner { display: grid; padding-top: 72px; }
  .footer__inner > div:last-child { text-align: left; }
  .footer__arc { width: 130%; }
}

@media (max-width: 410px) {
  .shell { width: calc(100% - 36px); }
  .brand-lockup strong { font-size: 13px; }
  .hero h1 { font-size: 57px; }
  .hero__mark-stage { min-height: 380px; }
  .hero__mark-stage figcaption { max-width: 24ch; }
  .chapter__header h2 { font-size: 42px; }
  .dont-grid, .semantic-colors, .metric-grid, .motion-spec { grid-template-columns: 1fr; }
  .construction dl div { grid-template-columns: 1fr; gap: 5px; }
  .lucky-code { grid-template-columns: 78px 1fr; gap: 16px; }
  .lucky-code > span { font-size: 54px; }
  .application__rules dl { grid-template-columns: 72px 1fr; }
  .arc-assets { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .brand-arc--hero { animation: none; clip-path: none; }
}

@media (forced-colors: active) {
  .hero__mark-stage, .web-mock, .app-mock, .slide, .case-study figure { box-shadow: none; }
  .hero__mark-stage::after, .ratio-bar span, .data-demo__chart > span, .slide--data i { forced-color-adjust: none; }
  .button, .mobile-menu summary, .swatch button { border-color: CanvasText; }
  :is(a, button, input, summary):focus-visible { outline-color: Highlight; }
}

@media print {
  .topbar, .toc, .mobile-menu, .hero__actions, .copy-toast { display: none !important; }
  body { background: white; color: black; font-size: 10pt; }
  .shell { width: 100%; }
  .hero { min-height: auto; padding: 36pt 0; }
  .manual { display: block; }
  .chapter { break-inside: avoid; padding: 32pt 0; }
  .manifesto, .footer, .prompt-block { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}