:root {
   --zx-bg: #f2f0ea;
   --zx-panel: #e5e2d8;
   --zx-line: #cec9bc;
   --zx-ink: #14182c;
   --zx-muted: #4c5168;
   --zx-accent: #26305c;
   --zx-accent-hi: #3c4c93;
   --zx-type: "Helvetica Neue", Helvetica, Arial, sans-serif;
   --zx-mono: ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
   --zx-width: 1220px;
   --zx-col: 760px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
   margin: 0;
   background: var(--zx-bg);
   color: var(--zx-ink);
   font-family: var(--zx-type);
   font-size: 17px;
   line-height: 1.65;
}

h1, h2, h3 {
   margin: 0 0 14px;
   line-height: 1.14;
   letter-spacing: -0.025em;
   font-weight: 700;
}

h1 { font-size: clamp(2rem, 6vw, 3.4rem); }

h2 { font-size: clamp(1.35rem, 3.4vw, 2rem); }

h3 { font-size: 1.1rem; letter-spacing: -0.01em; }

p { margin: 0 0 16px; }

a { color: var(--zx-accent); }

a:hover { color: var(--zx-accent-hi); }

img { display: block; max-width: 100%; height: auto; }

table { border-collapse: collapse; }

ul, ol { margin: 0 0 18px; padding-left: 22px; }

li { margin-bottom: 8px; }

:focus-visible { outline: 2px solid var(--zx-accent); outline-offset: 2px; }

.zx-skip {
   position: absolute;
   left: -9999px;
   top: 0;
   z-index: 80;
   padding: 12px 18px;
   background: var(--zx-accent);
   color: #ffffff;
}

.zx-skip:focus { left: 0; }

.zx-hold {
   max-width: var(--zx-width);
   margin: 0 auto;
   padding-left: 20px;
   padding-right: 20px;
}

.zx-mast {
   border-bottom: 2px solid var(--zx-ink);
   background: var(--zx-bg);
}

.zx-mast__inner {
   max-width: var(--zx-width);
   margin: 0 auto;
   padding: 16px 20px;
   display: flex;
   flex-wrap: wrap;
   align-items: baseline;
   gap: 8px 20px;
}

.zx-mast__name {
   font-size: 1.15rem;
   font-weight: 700;
   letter-spacing: -0.04em;
   text-transform: lowercase;
   color: var(--zx-ink);
   text-decoration: none;
}

.zx-mast__mail {
   margin-left: auto;
   font-size: 0.8rem;
   letter-spacing: 0.04em;
   text-transform: uppercase;
}

.zx-menu { width: 100%; }

.zx-menu ul {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex-wrap: wrap;
   gap: 0 22px;
}

.zx-menu a {
   display: inline-block;
   padding: 10px 0;
   min-height: 44px;
   font-size: 0.82rem;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   text-decoration: none;
   color: var(--zx-muted);
}

.zx-menu a:hover, .zx-menu a.is-active { color: var(--zx-ink); }

.zx-trail {
   padding-top: 18px;
   font-size: 0.78rem;
   letter-spacing: 0.05em;
   text-transform: uppercase;
   color: var(--zx-muted);
}

.zx-trail a { color: var(--zx-muted); }

.zx-eyebrow {
   display: block;
   margin-bottom: 12px;
   font-size: 0.76rem;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   color: var(--zx-accent);
}

.zx-plate {
   margin: 0 0 34px;
   padding-top: 34px;
   padding-bottom: 34px;
   background: var(--zx-accent);
}

.zx-plate__inner {
   max-width: var(--zx-width);
   margin: 0 auto;
   padding-left: 20px;
   padding-right: 20px;
   display: grid;
   grid-template-columns: 1fr;
   gap: 18px;
   align-items: start;
}

.zx-plate__pic {
   width: 100%;
   max-width: 260px;
   opacity: 0.94;
}

.zx-plate__cap {
   font-size: 0.92rem;
   line-height: 1.6;
   color: #dcdae6;
   max-width: 60ch;
}

.zx-open {
   padding-top: 36px;
   padding-bottom: 30px;
}

.zx-open h1 { max-width: 20ch; }

.zx-open__sub {
   font-size: 1.12rem;
   color: var(--zx-muted);
   max-width: 62ch;
}

.zx-open__sign {
   margin-top: 18px;
   font-family: var(--zx-mono);
   font-size: 0.8rem;
   color: var(--zx-muted);
}

.zx-open__acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

.zx-act {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-height: 44px;
   padding: 14px 26px;
   background: var(--zx-accent);
   color: #ffffff;
   border: 2px solid var(--zx-accent);
   text-decoration: none;
   font-size: 0.86rem;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   transition: background 160ms ease, color 160ms ease;
}

.zx-act:hover { background: var(--zx-bg); color: var(--zx-accent); }

.zx-act--line { background: transparent; color: var(--zx-ink); border-color: var(--zx-ink); }

.zx-act--line:hover { background: var(--zx-ink); color: var(--zx-bg); }

.zx-block { padding-top: 42px; padding-bottom: 8px; }

.zx-block__head { margin-bottom: 18px; }

.zx-block__no {
   display: inline-block;
   margin-right: 10px;
   font-family: var(--zx-mono);
   font-size: 0.82rem;
   color: var(--zx-accent);
}

.zx-say { max-width: 68ch; }

.zx-body { max-width: var(--zx-col); }

.zx-body h2 { margin-top: 34px; }

.zx-tablewrap {
   overflow-x: auto;
   border-top: 2px solid var(--zx-ink);
   border-bottom: 2px solid var(--zx-ink);
   margin-bottom: 10px;
}

.zx-table { width: 100%; min-width: 620px; font-size: 0.94rem; }

.zx-table caption {
   text-align: left;
   padding: 12px 0;
   font-size: 0.8rem;
   letter-spacing: 0.05em;
   text-transform: uppercase;
   color: var(--zx-muted);
}

.zx-table th, .zx-table td {
   text-align: left;
   padding: 11px 14px 11px 0;
   border-top: 1px solid var(--zx-line);
   vertical-align: top;
}

.zx-table thead th {
   border-top: 0;
   font-size: 0.78rem;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   color: var(--zx-muted);
}

.zx-table tbody th { font-weight: 700; }

.zx-table td { font-variant-numeric: tabular-nums; }

.zx-src { font-style: italic; font-size: 0.87rem; color: var(--zx-muted); margin-bottom: 28px; }

.zx-list { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 26px; align-items: start; }

.zx-item { border-top: 2px solid var(--zx-ink); padding-top: 14px; }

.zx-item__top { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }

.zx-item__icon { width: 54px; height: 54px; }

.zx-item__maker { display: block; font-size: 0.76rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--zx-muted); }

.zx-item h3 { margin: 0; }

.zx-item p { font-size: 0.96rem; color: var(--zx-muted); }

.zx-item__link { display: inline-block; padding: 10px 0; min-height: 44px; font-size: 0.84rem; letter-spacing: 0.04em; text-transform: uppercase; }

.zx-alt { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 30px; }

.zx-alt--turn .zx-alt__pic { order: -1; }

.zx-alt__pic img { width: 100%; }

.zx-alt__txt p { max-width: 60ch; }

.zx-belt { padding-top: 40px; padding-bottom: 26px; }

.zx-belt--ink { background: var(--zx-panel); }

.zx-halves { display: grid; grid-template-columns: 1fr; gap: 24px; }

.zx-halves__left p { font-size: 0.96rem; color: var(--zx-muted); }

.zx-halves__right h3 { margin-top: 22px; }

.zx-stair { list-style: none; margin: 0 0 26px; padding: 0; }

.zx-stair li {
   position: relative;
   margin-bottom: 0;
   margin-left: 18px;
   padding-left: 28px;
   padding-bottom: 20px;
   border-left: 2px solid var(--zx-line);
}

.zx-stair li:last-child { border-left-color: transparent; padding-bottom: 0; }

.zx-stair__mark {
   position: absolute;
   left: -18px;
   top: 0;
   width: 34px;
   height: 34px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--zx-accent);
   color: #ffffff;
   font-family: var(--zx-mono);
   font-size: 0.78rem;
}

.zx-stair h3 { margin-bottom: 5px; }

.zx-stair p { margin: 0; font-size: 0.96rem; color: var(--zx-muted); }

.zx-tiles { display: grid; grid-template-columns: 1fr; gap: 2px; margin-bottom: 26px; background: var(--zx-line); }

.zx-tile { background: var(--zx-bg); padding: 20px; }

.zx-tile--dark { background: var(--zx-accent); color: #ffffff; }

.zx-tile--dark h3 { color: #ffffff; }

.zx-tile__big { display: block; font-size: 2.2rem; font-weight: 700; letter-spacing: -0.045em; line-height: 1.05; }

.zx-tile p { margin: 6px 0 0; font-size: 0.94rem; color: var(--zx-muted); }

.zx-tile--dark p { color: #d5d8e8; }

.zx-slant { display: grid; grid-template-columns: 1fr; gap: 22px; }

.zx-slant__a p, .zx-slant__b p { max-width: 60ch; }

.zx-face { display: grid; grid-template-columns: 1fr; gap: 0; margin-bottom: 26px; }

.zx-face__cell { border-top: 1px solid var(--zx-line); padding: 16px 0; }

.zx-face__cell h3 { margin-bottom: 5px; }

.zx-face__cell p { margin: 0; font-size: 0.96rem; color: var(--zx-muted); }

.zx-steps ol { list-style: none; padding: 0; counter-reset: zxs; }

.zx-steps li { position: relative; padding-left: 42px; margin-bottom: 16px; max-width: 66ch; }

.zx-steps li::before {
   counter-increment: zxs;
   content: counter(zxs, decimal-leading-zero);
   position: absolute;
   left: 0;
   top: 0;
   font-family: var(--zx-mono);
   font-size: 0.84rem;
   color: var(--zx-accent);
}

.zx-mono {
   font-family: var(--zx-mono);
   font-size: 0.82rem;
   line-height: 1.72;
   background: var(--zx-panel);
   border-left: 4px solid var(--zx-accent);
   padding: 16px 18px;
   overflow-x: auto;
   white-space: pre;
   margin: 0 0 16px;
}

.zx-defs { display: grid; grid-template-columns: 1fr; margin: 0 0 26px; border-top: 2px solid var(--zx-ink); }

.zx-defs dt { padding-top: 14px; font-weight: 700; }

.zx-defs dd {
   margin: 0 0 14px;
   padding-bottom: 14px;
   border-bottom: 1px solid var(--zx-line);
   font-size: 0.96rem;
   color: var(--zx-muted);
}

.zx-bars { list-style: none; margin: 0 0 26px; padding: 0; }

.zx-bars li { position: relative; padding-left: 30px; max-width: 66ch; }

.zx-bars li::before {
   content: "";
   position: absolute;
   left: 0;
   top: 12px;
   width: 18px;
   height: 2px;
   background: var(--zx-accent);
}

.zx-gallery { display: grid; grid-template-columns: 1fr; gap: 18px; margin-bottom: 28px; }

.zx-gallery figure { margin: 0; }

.zx-gallery img { width: 100%; }

.zx-gallery figcaption { margin-top: 8px; font-size: 0.88rem; color: var(--zx-muted); }

.zx-years { margin-bottom: 28px; border-left: 2px solid var(--zx-accent); padding-left: 20px; }

.zx-years__row { padding-bottom: 16px; }

.zx-years__when { font-family: var(--zx-mono); font-size: 0.8rem; color: var(--zx-accent); }

.zx-years p { margin: 3px 0 0; font-size: 0.96rem; color: var(--zx-muted); max-width: 62ch; }

.zx-clash { margin-bottom: 28px; }

.zx-clash__pair { border-top: 1px solid var(--zx-line); padding: 16px 0; }

.zx-clash__heard { margin: 0 0 6px; font-size: 0.94rem; font-style: italic; color: var(--zx-muted); }

.zx-clash__found { margin: 0; max-width: 66ch; }

.zx-trip { display: grid; grid-template-columns: 1fr; gap: 2px; background: var(--zx-line); margin-bottom: 28px; }

.zx-trip__one { background: var(--zx-bg); padding: 16px 18px; }

.zx-trip__one h3 { margin-bottom: 5px; }

.zx-trip__one p { margin: 0; font-size: 0.94rem; color: var(--zx-muted); }

.zx-diagram { margin: 0 0 28px; }

.zx-diagram svg { width: 100%; max-width: 640px; background: var(--zx-panel); }

.zx-diagram figcaption { margin-top: 9px; font-size: 0.88rem; color: var(--zx-muted); }

.zx-qa { margin-bottom: 30px; }

.zx-qa details { border-bottom: 1px solid var(--zx-line); }

.zx-qa summary { cursor: pointer; padding: 16px 0; min-height: 44px; font-weight: 700; }

.zx-qa p { margin: 0 0 16px; max-width: 68ch; color: var(--zx-muted); }

.zx-final {
   margin-top: 40px;
   margin-bottom: 48px;
   padding: 34px 24px;
   background: var(--zx-accent);
   color: #ffffff;
}

.zx-final h2 { color: #ffffff; }

.zx-final p { color: #d7dae9; max-width: 56ch; }

.zx-final .zx-act { background: #ffffff; color: var(--zx-accent); border-color: #ffffff; }

.zx-final .zx-act:hover { background: var(--zx-accent); color: #ffffff; }

.zx-foot { border-top: 2px solid var(--zx-ink); padding-top: 32px; padding-bottom: 32px; }

.zx-foot__cols { display: grid; grid-template-columns: 1fr; gap: 20px; }

.zx-foot h2 { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--zx-muted); }

.zx-foot ul { list-style: none; margin: 0; padding: 0; }

.zx-foot a { display: inline-block; padding: 12px 0; min-height: 44px; font-size: 0.92rem; }

.zx-foot p { font-size: 0.92rem; color: var(--zx-muted); }

.zx-foot__rev { font-family: var(--zx-mono); font-size: 0.78rem; }

.zx-notice {
   position: fixed;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 60;
   display: none;
   padding: 16px 20px;
   background: var(--zx-ink);
   color: #ffffff;
}

.zx-notice.is-open { display: block; }

.zx-notice__row {
   max-width: var(--zx-width);
   margin: 0 auto;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 12px;
}

.zx-notice p { margin: 0; flex: 1 1 260px; font-size: 0.9rem; color: #e3e4ea; }

.zx-notice .zx-act { flex: 1 1 auto; background: #ffffff; color: var(--zx-ink); border-color: #ffffff; }

.zx-notice .zx-act:hover { background: var(--zx-ink); color: #ffffff; }

.zx-notice .zx-act--line { background: transparent; color: #ffffff; border-color: #8c92a8; }

.zx-notice .zx-act--line:hover { background: #ffffff; color: var(--zx-ink); }

.zx-rise { opacity: 0; transform: translateY(14px); transition: opacity 340ms ease, transform 340ms ease; }

.zx-rise.is-seen { opacity: 1; transform: none; }

.zx-halves__left,
.zx-halves__right,
.zx-slant__a,
.zx-slant__b,
.zx-alt__txt,
.zx-alt__pic,
.zx-tile,
.zx-plate__cap { min-width: 0; }

@media (min-width: 560px) {
   .zx-notice .zx-act { flex: 0 0 auto; }
   .zx-gallery { grid-template-columns: repeat(2, 1fr); }
   .zx-trip { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 780px) {
   .zx-gallery img, .zx-alt__pic img { width: auto; max-width: 100%; max-height: 520px; }
   .zx-list { grid-template-columns: repeat(2, 1fr); gap: 28px; }
   .zx-tiles { grid-template-columns: repeat(3, 1fr); }
   .zx-tile--wide { grid-column: span 2; }
   .zx-defs { grid-template-columns: 220px 1fr; column-gap: 26px; }
   .zx-defs dd { margin-bottom: 0; }
   .zx-face { grid-template-columns: repeat(2, 1fr); column-gap: 30px; }
   .zx-foot__cols { grid-template-columns: 1.5fr 1fr 1fr; }
   .zx-plate__inner { grid-template-columns: 240px minmax(0, 46ch); gap: 40px; }
   .zx-plate__pic { max-width: 240px; }
   .zx-menu { width: auto; }
}

@media (min-width: 1020px) {
   .zx-alt { grid-template-columns: 1fr 440px; gap: 40px; align-items: center; }
   .zx-alt--turn .zx-alt__pic { order: 0; }
   .zx-alt--turn .zx-alt__txt { order: 1; }
   .zx-halves { grid-template-columns: 340px 1fr; gap: 48px; }
   .zx-slant { grid-template-columns: repeat(12, 1fr); gap: 0 24px; }
   .zx-slant__a { grid-column: 1 / 7; }
   .zx-slant__b { grid-column: 6 / 13; }
   .zx-gallery--three { grid-template-columns: repeat(3, 1fr); }
   .zx-list--three { grid-template-columns: repeat(3, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
   .zx-rise { opacity: 1; transform: none; transition: none; }
   .zx-act { transition: none; }
}