:root {
  --x-ink: #090b10;
  --x-panel: #11151d;
  --x-panel-2: #181d28;
  --x-paper: #edf1ed;
  --x-mist: #a7b0bd;
  --x-line: rgba(237, 241, 237, .17);
  --x-blue: #397cff;
  --x-lime: #c7ff3c;
  --x-ser: Georgia, 'Times New Roman', serif;
  --x-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--x-ink); }
body { margin: 0; min-width: 320px; background: var(--x-ink); color: var(--x-paper); font: 400 16px/1.62 var(--x-sans); overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--x-lime); }
button, input, textarea { font: inherit; }
button, input[type='checkbox'], input[type='radio'], a[href^='#'] { min-height: 44px; min-width: 44px; }
:focus-visible { outline: 3px solid var(--x-lime); outline-offset: 3px; }
.x-skip { position: fixed; z-index: 3000; left: 16px; top: -70px; padding: 10px 16px; background: var(--x-lime); color: #071012; font-weight: 800; text-decoration: none; transition: top .2s; }
.x-skip:focus { top: 12px; }
.x-shell { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.x-eyebrow { margin: 0 0 12px; color: var(--x-lime); font-size: .72rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.x-kicker { color: var(--x-blue); font-size: .74rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.x-rule { height: 1px; width: 100%; background: var(--x-line); }
.x-wordmark { display: inline-flex; align-items: center; gap: 10px; min-width: 44px; min-height: 44px; color: var(--x-paper); text-decoration: none; }
.x-wordmark img { width: 32px; height: 32px; flex: 0 0 auto; }
.x-wordmark-text { font-size: .76rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.x-header { position: sticky; z-index: 100; top: 0; background: rgba(9, 11, 16, .93); border-bottom: 1px solid var(--x-line); backdrop-filter: blur(12px); }
.x-header-in { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; min-height: 72px; }
.x-header .navbar-toggler { justify-self: end; width: 48px; height: 48px; padding: 0; border: 1px solid var(--x-line); border-radius: 0; color: var(--x-paper); }
.x-header .navbar-toggler-icon { filter: invert(1); }
.x-header .navbar-collapse { align-items: center; }
.x-nav-list { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.x-nav-list a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 11px; color: var(--x-mist); font-size: .78rem; font-weight: 750; letter-spacing: .07em; text-decoration: none; text-transform: uppercase; }
.x-header-mail { display: inline-flex; align-items: center; min-height: 44px; color: var(--x-lime); font-size: .78rem; font-weight: 750; white-space: nowrap; }
.x-main { overflow: hidden; }
.x-hero { position: relative; padding: 68px 0 0; background: linear-gradient(115deg, #090b10 16%, #121a2b 100%); }
.x-hero:after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0, transparent 77px, rgba(255,255,255,.035) 78px); }
.x-hero-in { position: relative; z-index: 1; display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(30px, 6vw, 80px); align-items: end; }
.x-hero-copy { padding: 0 0 60px; }
h1, h2, h3, h4 { color: var(--x-paper); font-family: var(--x-ser); font-weight: 400; line-height: 1.05; }
h1 { max-width: 760px; margin: 0; font-size: clamp(3.25rem, 7.1vw, 7rem); letter-spacing: -.065em; }
h2 { margin: 0; font-size: clamp(2.25rem, 4.4vw, 4.65rem); letter-spacing: -.05em; }
h3 { margin: 0 0 12px; font-size: clamp(1.35rem, 2vw, 2rem); letter-spacing: -.025em; }
.x-hero h1 em { color: var(--x-lime); font-style: normal; }
.x-hero-intro { max-width: 570px; margin: 24px 0 0; color: #d1d8df; font-family: var(--x-ser); font-size: clamp(1.13rem, 1.8vw, 1.45rem); line-height: 1.55; }
.x-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 10px 16px; border: 1px solid transparent; color: #071012; background: var(--x-lime); font-size: .78rem; font-weight: 850; letter-spacing: .09em; text-decoration: none; text-transform: uppercase; transition: transform .18s, background .18s; }
.x-button:hover { color: #071012; background: #ddff86; transform: translateY(-2px); }
.x-button--line { border-color: var(--x-blue); background: transparent; color: var(--x-paper); }
.x-button--line:hover { color: var(--x-paper); background: var(--x-blue); }
.x-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.x-hero-image { position: relative; min-height: 560px; }
.x-hero-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 61% center; filter: saturate(.9); }
.x-hero-image:after { content: 'release notebook / 01'; position: absolute; bottom: 0; left: 0; padding: 10px 14px; background: var(--x-lime); color: #071012; font-size: .68rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.x-rhythm { border-bottom: 1px solid var(--x-line); background: var(--x-panel); }
.x-rhythm-grid { display: grid; grid-template-columns: 1.1fr repeat(4, 1fr); min-height: 154px; }
.x-rhythm-label, .x-rhythm-item { padding: 25px 20px; border-right: 1px solid var(--x-line); }
.x-rhythm-label { display: flex; align-items: flex-end; background: #0d1016; }
.x-rhythm-label strong { font-family: var(--x-ser); font-size: 1.4rem; font-weight: 400; line-height: 1.2; }
.x-rhythm-item { position: relative; }
.x-rhythm-item:before { content: attr(data-step); display: block; margin-bottom: 24px; color: var(--x-blue); font-size: .67rem; font-weight: 850; letter-spacing: .12em; }
.x-rhythm-item span { display: block; color: var(--x-mist); font-size: .8rem; line-height: 1.35; }
.x-module { padding: clamp(70px, 11vw, 140px) 0; border-bottom: 1px solid var(--x-line); }
.x-module--paper { color: #172031; background: var(--x-paper); }
.x-module--paper h2, .x-module--paper h3 { color: #0b1422; }
.x-module--paper .x-eyebrow { color: #2462d1; }
.x-module--paper .x-kicker { color: #49630b; }
.x-module--paper .x-rule { background: rgba(11,20,34,.18); }
.x-intro-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(24px, 8vw, 112px); align-items: start; }
.x-intro-grid p { max-width: 680px; margin: 22px 0 0; font-family: var(--x-ser); font-size: clamp(1.16rem, 1.95vw, 1.6rem); line-height: 1.52; }
.x-margin-note { border-left: 2px solid var(--x-lime); padding: 6px 0 6px 18px; color: var(--x-mist); font-size: .87rem; line-height: 1.55; }
.x-lenses { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 56px; border-top: 1px solid var(--x-line); }
.x-lens { min-height: 205px; padding: 26px; border-right: 1px solid var(--x-line); border-bottom: 1px solid var(--x-line); }
.x-lens:nth-child(even) { border-right: 0; }
.x-lens-index { display: block; margin-bottom: 34px; color: var(--x-lime); font-size: .69rem; font-weight: 850; letter-spacing: .13em; }
.x-lens p { margin: 0; color: var(--x-mist); font-size: .92rem; }
.x-decision { display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); gap: clamp(36px, 8vw, 110px); align-items: start; }
.x-decision-aside { border-top: 4px solid var(--x-blue); padding-top: 22px; }
.x-decision-aside p { margin: 16px 0 0; color: var(--x-mist); }
.x-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.x-tab { min-width: auto; min-height: 46px; padding: 9px 14px; border: 1px solid var(--x-line); border-radius: 0; color: var(--x-mist); background: transparent; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.x-tab.active, .x-tab[aria-selected='true'] { color: #071012; border-color: var(--x-lime); background: var(--x-lime); }
.x-tab-panel { min-height: 312px; padding: clamp(24px, 4vw, 45px); border: 1px solid var(--x-line); background: var(--x-panel); }
.x-tab-panel p { max-width: 560px; margin: 0 0 28px; color: #c6ced8; font-family: var(--x-ser); font-size: 1.18rem; }
.x-tab-points { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 26px; margin: 0; padding: 0; list-style: none; }
.x-tab-points li { position: relative; padding-left: 17px; color: var(--x-mist); font-size: .86rem; }
.x-tab-points li:before { content: ''; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; background: var(--x-blue); }
.x-notebook-head { display: grid; grid-template-columns: .9fr 1.1fr; gap: 30px; align-items: end; margin-bottom: 38px; }
.x-notebook-head p { max-width: 550px; margin: 0; color: #3a475b; font-family: var(--x-ser); font-size: 1.2rem; }
.x-photo-sequence { display: grid; grid-template-columns: 1.05fr .95fr .64fr; grid-template-rows: 285px 330px; gap: 16px; }
.x-photo { position: relative; min-width: 0; overflow: hidden; background: #cbd1d1; }
.x-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.x-photo:hover img { transform: scale(1.035); }
.x-photo--a { grid-row: span 2; }
.x-photo--b { grid-column: 2; }
.x-photo--c { grid-column: 3; grid-row: span 2; }
.x-photo--d { grid-column: 2; }
.x-photo figcaption { position: absolute; right: 0; bottom: 0; max-width: 88%; padding: 8px 10px; color: #fff; background: rgba(9,11,16,.82); font-size: .7rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.x-check-grid { display: grid; grid-template-columns: 1fr .78fr; gap: clamp(36px, 10vw, 150px); align-items: start; }
.x-checklist { margin-top: 30px; border-top: 1px solid var(--x-line); }
.x-check-row { display: flex; align-items: center; gap: 12px; min-height: 66px; border-bottom: 1px solid var(--x-line); cursor: pointer; }
.x-check-row input { appearance: none; flex: 0 0 44px; width: 44px; height: 44px; margin: 0; border: 1px solid rgba(11,20,34,.38); border-radius: 0; background: transparent; cursor: pointer; }
.x-check-row input:checked { border-color: #0d5cce; background: #0d5cce; box-shadow: inset 0 0 0 9px var(--x-paper); }
.x-check-row span { font-size: 1rem; line-height: 1.35; }
.x-check-row input:checked + span { text-decoration: line-through; color: #596371; }
.x-check-status { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 23px; }
.x-check-status strong { font-family: var(--x-ser); font-size: 1.38rem; font-weight: 400; }
.x-clear { min-height: 44px; padding: 8px 12px; border: 1px solid #637085; color: #1a293c; background: transparent; font-size: .72rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.x-check-aside { padding: 24px; border-left: 4px solid var(--x-blue); background: #dce4e2; }
.x-check-aside p { margin: 12px 0 0; font-family: var(--x-ser); font-size: 1.08rem; line-height: 1.52; }
.x-story { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(30px, 8vw, 118px); }
.x-story-copy > p { max-width: 480px; margin: 20px 0 0; color: var(--x-mist); }
.x-story-ledger { counter-reset: x-ledger; }
.x-story-row { display: grid; grid-template-columns: 66px 1fr; gap: 18px; padding: 23px 0; border-top: 1px solid var(--x-line); }
.x-story-row:before { counter-increment: x-ledger; content: '0' counter(x-ledger); color: var(--x-lime); font-size: .72rem; font-weight: 850; letter-spacing: .12em; }
.x-story-row:last-child { border-bottom: 1px solid var(--x-line); }
.x-story-row h3 { margin-bottom: 11px; font-family: var(--x-sans); font-size: 1rem; font-weight: 800; letter-spacing: -.015em; }
.x-story-row p { margin: 0; color: var(--x-mist); font-size: .91rem; }
.x-image-ledger { display: grid; grid-template-columns: .78fr 1.22fr; gap: 18px; }
.x-image-ledger figure { margin: 0; }
.x-image-ledger img { width: 100%; height: 100%; min-height: 280px; object-fit: cover; }
.x-image-ledger .x-ledger-wide { min-height: 460px; }
.x-image-ledger figcaption { margin-top: 9px; color: var(--x-mist); font-size: .75rem; }
.x-reading { display: grid; grid-template-columns: .9fr .5fr .95fr; gap: 0; border: 1px solid var(--x-line); }
.x-reading-item { min-height: 274px; padding: 27px; border-right: 1px solid var(--x-line); }
.x-reading-item:last-child { border-right: 0; }
.x-reading-item--blue { background: var(--x-blue); color: #06142c; }
.x-reading-item--blue h3 { color: #06142c; }
.x-reading-item--lime { background: var(--x-lime); color: #10200e; }
.x-reading-item--lime h3 { color: #10200e; }
.x-reading-num { display: block; margin-bottom: 45px; font-size: .7rem; font-weight: 850; letter-spacing: .12em; }
.x-reading-item p { margin: 0; font-family: var(--x-ser); font-size: 1.08rem; line-height: 1.47; }
.x-faq-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(34px, 9vw, 130px); }
.x-faq-copy p { color: var(--x-mist); }
.x-faq-copy h2 { margin-bottom: 14px; }
.x-accordion .accordion-item { color: var(--x-paper); border: 0; border-bottom: 1px solid var(--x-line); border-radius: 0; background: transparent; }
.x-accordion .accordion-button { min-height: 70px; padding: 18px 52px 18px 0; color: var(--x-paper); background: transparent; box-shadow: none; font: 700 1rem/1.35 var(--x-sans); }
.x-accordion .accordion-button:not(.collapsed) { color: var(--x-lime); background: transparent; }
.x-accordion .accordion-button::after { filter: invert(1); }
.x-accordion .accordion-body { max-width: 670px; padding: 0 0 22px; color: var(--x-mist); }
.x-dispatch { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(30px, 8vw, 100px); align-items: start; }
.x-dispatch-image { position: relative; min-height: 520px; }
.x-dispatch-image img { width: 100%; height: 100%; object-fit: cover; }
.x-dispatch-image span { position: absolute; right: 16px; top: 16px; padding: 8px 10px; color: #071012; background: var(--x-lime); font-size: .68rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.x-form-intro { margin: 18px 0 26px; color: var(--x-mist); }
.x-form-note { padding: 13px 15px; border-left: 3px solid var(--x-lime); color: #d5dde8; background: rgba(57,124,255,.12); font-size: .86rem; }
.x-form { margin-top: 24px; }
.x-field { margin-bottom: 16px; }
.x-field label { display: block; margin: 0 0 7px; color: var(--x-paper); font-size: .77rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.x-field input, .x-field textarea { width: 100%; min-height: 50px; padding: 11px 12px; border: 1px solid var(--x-line); border-radius: 0; color: var(--x-paper); background: #0d1119; font-size: 16px; }
.x-field textarea { min-height: 128px; resize: vertical; }
.x-form-status { min-height: 26px; margin: 15px 0 0; color: var(--x-lime); font-size: .9rem; }
.x-form-status.x-error { color: #ff9d9d; }
.x-footer { padding: 48px 0 26px; color: var(--x-mist); background: #05070a; }
.x-footer-top { display: grid; grid-template-columns: 1.15fr .85fr .75fr; gap: 30px; padding-bottom: 38px; }
.x-footer .x-wordmark { margin-bottom: 14px; }
.x-footer h2 { margin: 0 0 14px; font-family: var(--x-sans); font-size: .78rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.x-footer p { margin: 0; font-size: .88rem; }
.x-footer-list { margin: 0; padding: 0; list-style: none; }
.x-footer-list li + li { margin-top: 7px; }
.x-footer-list a, .x-footer-mail { display: inline-flex; align-items: center; min-height: 44px; color: var(--x-paper); font-size: .88rem; }
.x-footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 18px; border-top: 1px solid var(--x-line); font-size: .73rem; }
.x-legal-main { padding: clamp(55px, 9vw, 120px) 0; }
.x-legal-article { max-width: 820px; }
.x-legal-article h1 { margin-bottom: 28px; font-size: clamp(3rem, 6vw, 5.7rem); }
.x-legal-article h2 { margin: 48px 0 16px; font-size: clamp(1.6rem, 3.3vw, 2.75rem); }
.x-legal-article p, .x-legal-article li { color: #c1cad4; }
.x-legal-article ul { padding-left: 1.3rem; }
.x-legal-date { color: var(--x-lime); font-weight: 700; }
.x-notfound { display: grid; place-items: center; min-height: calc(100vh - 72px); padding: 48px 0; background: radial-gradient(circle at 75% 25%, rgba(57,124,255,.36), transparent 29%), var(--x-ink); }
.x-notfound-in { max-width: 780px; }
.x-notfound-code { margin: 0; color: var(--x-lime); font-size: clamp(6rem, 21vw, 16rem); font-weight: 850; letter-spacing: -.1em; line-height: .82; }
.x-notfound h1 { margin: 25px 0 16px; font-size: clamp(2.5rem, 5vw, 4.8rem); }
.x-notfound p { max-width: 550px; color: var(--x-mist); font-family: var(--x-ser); font-size: 1.25rem; }
@media (max-width: 991.98px) {
  .x-header-in { grid-template-columns: auto 1fr auto; }
  .x-header .navbar-collapse { grid-column: 1 / -1; }
  .x-nav-list { align-items: stretch; flex-direction: column; padding: 10px 0 14px; }
  .x-nav-list a { padding-inline: 0; }
  .x-hero-in, .x-intro-grid, .x-decision, .x-check-grid, .x-story, .x-faq-layout, .x-dispatch { grid-template-columns: 1fr; }
  .x-hero-image { min-height: 430px; }
  .x-hero-copy { padding-bottom: 0; }
  .x-rhythm-grid { grid-template-columns: 1fr 1fr; }
  .x-rhythm-label { grid-column: 1 / -1; min-height: 95px; }
  .x-rhythm-item:nth-child(3) { border-right: 0; }
  .x-notebook-head { grid-template-columns: 1fr; }
  .x-footer-top { grid-template-columns: 1fr 1fr; }
  .x-footer-top > :first-child { grid-column: 1 / -1; }
  .x-reading { grid-template-columns: 1fr 1fr; }
  .x-reading-item:last-child { grid-column: 1 / -1; border-top: 1px solid var(--x-line); }
  .x-reading-item:nth-child(2) { border-right: 0; }
}
@media (max-width: 620px) {
  .x-shell { width: min(100% - 32px, 1180px); }
  .x-header-in { gap: 10px; }
  .x-header-mail { font-size: .7rem; }
  .x-wordmark-text { display: none; }
  .x-hero { padding-top: 38px; }
  .x-hero-copy { padding-bottom: 35px; }
  .x-hero-image { min-height: 355px; }
  .x-rhythm-grid { grid-template-columns: 1fr 1fr; }
  .x-rhythm-label, .x-rhythm-item { padding: 19px 16px; }
  .x-rhythm-item { min-height: 123px; }
  .x-rhythm-item:nth-child(even) { border-right: 0; }
  .x-lenses { grid-template-columns: 1fr; }
  .x-lens, .x-lens:nth-child(even) { border-right: 0; }
  .x-tab-points { grid-template-columns: 1fr; }
  .x-photo-sequence { grid-template-columns: 1fr 1fr; grid-template-rows: 255px 220px 255px; }
  .x-photo--a { grid-column: 1 / -1; grid-row: auto; }
  .x-photo--b { grid-column: 1; }
  .x-photo--c { grid-column: 2; grid-row: 2 / span 2; }
  .x-photo--d { grid-column: 1; }
  .x-image-ledger { grid-template-columns: 1fr; }
  .x-image-ledger img, .x-image-ledger .x-ledger-wide { min-height: 260px; max-height: 380px; }
  .x-reading { grid-template-columns: 1fr; }
  .x-reading-item, .x-reading-item:nth-child(2) { border-right: 0; border-bottom: 1px solid var(--x-line); }
  .x-reading-item:last-child { border-bottom: 0; }
  .x-dispatch-image { min-height: 340px; }
  .x-footer-top { grid-template-columns: 1fr; }
  .x-footer-top > :first-child { grid-column: auto; }
  .x-footer-bottom { align-items: flex-start; flex-direction: column; }
}