.rz-library {
  --rl-ink: oklch(18% .008 55);
  --rl-stage: oklch(21% .009 55);
  --rl-paper: oklch(96% .009 70);
  --rl-paper-2: oklch(92% .013 65);
  --rl-coral: oklch(73% .16 38);
  --rl-muted: oklch(62% .015 60);
  --rl-rule: oklch(36% .01 55);
  overflow: clip;
  background: var(--rl-paper);
  color: var(--rl-ink);
  font: 400 16px/1.6 Manrope, "Avenir Next", Arial, sans-serif;
}
.rz-library *, .rz-library *::before, .rz-library *::after { box-sizing: border-box; }
.rz-library a { color: inherit; text-decoration: none; }
.rz-library a:focus-visible { outline: 3px solid var(--rl-coral); outline-offset: 4px; }
.rl-shell { width: min(1200px, 91%); margin-inline: auto; }
.rl-hero { position: relative; overflow: hidden; padding: clamp(76px, 11vw, 140px) 0 clamp(75px, 10vw, 126px); background: var(--rl-ink); color: var(--rl-paper); }
.rl-hero::after { position: absolute; right: -5vw; bottom: -17vw; width: min(55vw, 760px); aspect-ratio: 1; border: 1px solid oklch(37% .012 55); border-radius: 50%; content: ""; box-shadow: 0 0 0 5vw var(--rl-ink), 0 0 0 calc(5vw + 1px) oklch(32% .01 55), 0 0 0 12vw var(--rl-ink), 0 0 0 calc(12vw + 1px) oklch(28% .01 55); pointer-events: none; }
.rl-hero .rl-shell { position: relative; z-index: 1; }
.rl-kicker, .rl-section-label { margin: 0; color: var(--rl-coral); font-size: 11px; font-weight: 700; letter-spacing: .13em; line-height: 1.6; text-transform: uppercase; }
.rl-kicker > span { font-size: 19px; vertical-align: -2px; }
.rl-kicker i { color: var(--rl-muted); font-style: normal; }
.rl-hero h1 { max-width: 950px; margin: 25px 0 22px; font-size: clamp(48px, 8vw, 102px); font-weight: 600; letter-spacing: -.075em; line-height: .99; }
.rl-hero h1 em { color: var(--rl-coral); font-style: normal; }
.rl-intro { max-width: 610px; color: oklch(78% .012 60); font-size: clamp(17px, 1.7vw, 20px); line-height: 1.7; }
.rl-hero-link { display: inline-flex; min-height: 48px; align-items: center; gap: 30px; margin-top: 29px; padding: 0 16px; border: 1px solid var(--rl-rule); font-size: 13px; transition: border-color .2s, color .2s; }
.rl-hero-link:hover { border-color: var(--rl-coral); color: var(--rl-coral); }
.rl-hero-link span { color: var(--rl-coral); font-size: 18px; }
.rl-section { padding: clamp(64px, 8vw, 106px) 0; }
.rl-start { background: var(--rl-paper); }
.rl-section-label { display: flex; align-items: center; gap: 12px; color: oklch(48% .13 38); }
.rl-section-label > span { color: oklch(43% .012 55); font: 11px/1.5 ui-monospace, monospace; }
.rl-start-heading { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin: 14px 0 30px; }
.rl-start-heading h2, .rl-section-head h2 { max-width: 720px; margin: 0; font-size: clamp(34px, 4.5vw, 57px); font-weight: 600; letter-spacing: -.065em; line-height: 1.07; }
.rl-start-heading p, .rl-section-head > p { max-width: 290px; margin: 0; color: oklch(46% .012 55); font-size: 14px; }
.rl-problem-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border-top: 1px solid oklch(78% .012 55); }
.rl-problem { display: flex; min-height: 94px; align-items: center; gap: 17px; padding: 18px 18px 18px 0; border-bottom: 1px solid oklch(78% .012 55); transition: background .2s, padding .2s; }
.rl-problem:nth-child(odd) { margin-right: 28px; }
.rl-problem:nth-child(even) { padding-left: 28px; border-left: 1px solid oklch(78% .012 55); }
.rl-problem:hover { color: oklch(48% .13 38); }
.rl-problem-num { align-self: start; padding-top: 2px; color: oklch(50% .012 55); font: 11px/1.5 ui-monospace, monospace; }
.rl-problem-copy { display: flex; flex: 1; flex-direction: column; gap: 4px; }
.rl-problem-copy strong { font-size: 16px; font-weight: 600; letter-spacing: -.025em; line-height: 1.4; }
.rl-problem-copy small { color: oklch(48% .012 55); font-size: 12px; line-height: 1.5; }
.rl-arrow { color: oklch(48% .13 38); font-size: 20px; }
.rl-reading { background: var(--rl-paper-2); }
.rl-section-head { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 38px; }
.rl-section-head h2 { margin-top: 13px; }
.rl-section-head > p { padding-bottom: 4px; }
.rl-reading-layout { display: grid; grid-template-columns: 1.08fr .92fr; border-top: 1px solid oklch(76% .012 55); border-bottom: 1px solid oklch(76% .012 55); }
.rl-lead-guide { min-width: 0; padding: 0 30px 30px 0; border-right: 1px solid oklch(76% .012 55); }
.rl-guide-art { position: relative; overflow: hidden; background: var(--rl-stage); }
.rl-guide-art img { display: block; width: 100%; aspect-ratio: 1.9; object-fit: cover; filter: saturate(.78); transition: transform .55s cubic-bezier(.22,1,.36,1); }
.rl-lead-guide:hover .rl-guide-art img { transform: scale(1.025); }
.rl-guide-art > span { position: absolute; right: 12px; bottom: 12px; left: 12px; padding: 9px 12px; background: oklch(18% .008 55 / .88); color: var(--rl-paper); font: 10px/1.4 ui-monospace, monospace; letter-spacing: .08em; }
.rl-guide-art b { color: var(--rl-coral); font-weight: 400; }
.rl-lead-copy { padding-top: 23px; }
.rl-guide-meta, .rl-guide-row small, .rl-case-row small { color: oklch(49% .012 55); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.rl-guide-meta span { padding-inline: 5px; color: oklch(48% .13 38); }
.rl-lead-copy h3 { max-width: 580px; margin: 11px 0 10px; font-size: clamp(25px, 3vw, 37px); font-weight: 600; letter-spacing: -.055em; line-height: 1.15; }
.rl-lead-copy > p { max-width: 60ch; margin: 0; color: oklch(44% .012 55); font-size: 15px; line-height: 1.7; }
.rl-read-link { display: inline-flex; align-items: center; gap: 18px; margin-top: 17px; color: oklch(48% .13 38); font-size: 13px; font-weight: 700; }
.rl-read-link b { font-size: 18px; }
.rl-guide-list { padding-left: 30px; }
.rl-guide-row, .rl-case-row { display: grid; grid-template-columns: 28px minmax(0,1fr) 20px; gap: 13px; align-items: start; padding: 17px 0; border-bottom: 1px solid oklch(76% .012 55); }
.rl-guide-row:first-child, .rl-case-row:first-child { padding-top: 19px; }
.rl-guide-row:last-child { border-bottom: 0; }
.rl-guide-row > span:first-child, .rl-case-row > span:first-child { color: oklch(49% .012 55); font: 10px/1.6 ui-monospace, monospace; }
.rl-guide-row > span:nth-child(2), .rl-case-row > span:nth-child(2) { display: grid; gap: 5px; }
.rl-guide-row strong, .rl-case-row strong { font-size: 17px; font-weight: 600; letter-spacing: -.025em; line-height: 1.35; }
.rl-guide-row > b, .rl-case-row > b { color: oklch(48% .13 38); font-size: 17px; font-weight: 400; }
.rl-guide-row:hover strong, .rl-case-row:hover strong { color: oklch(48% .13 38); }
.rl-system { background: var(--rl-stage); color: var(--rl-paper); }
.rl-system .rl-section-label { color: var(--rl-coral); }
.rl-system .rl-section-label > span { color: oklch(76% .012 60); }
.rl-system-layout { display: grid; grid-template-columns: 1fr .86fr; gap: 8%; align-items: center; }
.rl-system h2 { max-width: 590px; margin: 16px 0; font-size: clamp(35px, 4.6vw, 58px); font-weight: 600; letter-spacing: -.065em; line-height: 1.06; }
.rl-system-layout > div:first-child > p { max-width: 56ch; color: oklch(76% .012 60); font-size: 16px; line-height: 1.75; }
.rl-button { display: inline-flex; min-height: 48px; align-items: center; gap: 22px; margin-top: 24px; padding: 0 15px; background: var(--rl-coral); color: var(--rl-ink) !important; font-size: 13px; font-weight: 700; }
.rl-button span { font-size: 17px; }
.rl-button:hover { filter: brightness(1.06); }
.rl-system-visual { position: relative; display: grid; min-height: 330px; place-items: center; overflow: hidden; border: 1px solid var(--rl-rule); background: radial-gradient(circle at center, oklch(27% .012 55), var(--rl-stage) 67%); }
.rl-system-stamp { position: relative; z-index: 1; color: var(--rl-paper); font-size: clamp(28px, 4vw, 48px); font-weight: 700; letter-spacing: -.075em; line-height: .97; }
.rl-system-stamp b { color: var(--rl-coral); font-size: 1.36em; }
.rl-system-orbit { position: absolute; top: 50%; left: 50%; width: 230px; aspect-ratio: 1; border: 1px solid oklch(46% .012 55); border-radius: 50%; transform: translate(-50%,-50%); }
.rl-orbit-b { width: 310px; border-color: oklch(33% .01 55); }
.rl-system-mark, .rl-system-code { position: absolute; z-index: 1; color: oklch(72% .012 55); font: 9px/1.7 ui-monospace, monospace; letter-spacing: .08em; }
.rl-system-mark { top: 24px; right: 24px; text-align: right; }
.rl-system-code { bottom: 21px; left: 24px; color: var(--rl-coral); }
.rl-cases { background: var(--rl-paper); }
.rl-text-link { padding-bottom: 5px; border-bottom: 1px solid oklch(60% .012 55); color: oklch(48% .13 38) !important; font-size: 13px; }
.rl-text-link span { margin-left: 12px; }
.rl-case-layout { display: grid; grid-template-columns: 1.18fr .82fr; gap: 32px; border-top: 1px solid oklch(78% .012 55); }
.rl-lead-case { position: relative; display: block; min-height: 380px; overflow: hidden; background: var(--rl-stage); }
.rl-lead-case > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.72); transition: transform .55s cubic-bezier(.22,1,.36,1); }
.rl-lead-case:hover > img { transform: scale(1.03); }
.rl-case-caption { position: absolute; right: 0; bottom: 0; left: 0; padding: 45px 27px 24px; background: linear-gradient(0deg, oklch(18% .008 55 / .97), oklch(18% .008 55 / .75) 72%, transparent); color: var(--rl-paper); }
.rl-case-caption small { color: var(--rl-coral); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.rl-case-caption h3 { max-width: 580px; margin: 8px 0 10px; font-size: clamp(25px, 3.3vw, 40px); font-weight: 600; letter-spacing: -.055em; line-height: 1.12; }
.rl-case-caption > span { color: oklch(86% .01 60); font-size: 12px; }
.rl-case-caption b { margin-left: 9px; color: var(--rl-coral); font-size: 16px; }
.rl-case-list { display: flex; flex-direction: column; }
.rl-case-row { grid-template-columns: 27px minmax(0,1fr) 20px; padding: 22px 0; border-color: oklch(78% .012 55); }
.rl-case-row strong { font-size: 20px; }
.rl-case-row > b { justify-self: end; }
.rl-all-cases { display: flex; justify-content: space-between; margin-top: auto; padding: 16px 0; border-top: 1px solid oklch(78% .012 55); color: oklch(48% .13 38) !important; font-size: 13px; font-weight: 700; }
.rl-domains { background: var(--rl-paper-2); }
.rl-domains .rl-section-head { margin-bottom: 28px; }
.rl-domain-list { border-top: 1px solid oklch(76% .012 55); }
.rl-domain-row { display: grid; grid-template-columns: 40px minmax(0,1fr) 24px; gap: 20px; align-items: start; padding: 19px 0; border-bottom: 1px solid oklch(76% .012 55); transition: padding .2s; }
.rl-domain-row:hover { padding-inline: 8px; }
.rl-domain-num { padding-top: 3px; color: oklch(48% .13 38); font: 11px/1.6 ui-monospace, monospace; }
.rl-domain-copy { display: grid; gap: 4px; }
.rl-domain-copy strong { font-size: 21px; font-weight: 600; letter-spacing: -.035em; }
.rl-domain-copy small { max-width: 80ch; color: oklch(46% .012 55); font-size: 14px; line-height: 1.6; }
.rl-domains .rl-arrow { justify-self: end; }
@media (max-width: 760px) {
  .rl-shell { width: min(100% - 36px, 620px); }
  .rl-hero { padding-top: 64px; padding-bottom: 68px; }
  .rl-hero::after { right: -38vw; bottom: -53vw; width: 85vw; }
  .rl-kicker { font-size: 10px; }
  .rl-kicker i { display: block; margin-left: 30px; }
  .rl-hero h1 { font-size: clamp(44px, 12vw, 68px); }
  .rl-intro { font-size: 17px; }
  .rl-start-heading, .rl-section-head { display: block; }
  .rl-start-heading p, .rl-section-head > p { margin-top: 13px; }
  .rl-problem-list { grid-template-columns: 1fr; }
  .rl-problem:nth-child(odd), .rl-problem:nth-child(even) { margin: 0; padding: 15px 0; border-left: 0; }
  .rl-problem-copy strong { font-size: 16px; }
  .rl-problem-copy small { font-size: 13px; }
  .rl-reading-layout, .rl-system-layout, .rl-case-layout { grid-template-columns: 1fr; }
  .rl-lead-guide { padding: 0 0 24px; border-right: 0; border-bottom: 1px solid oklch(76% .012 55); }
  .rl-guide-list { padding-left: 0; }
  .rl-guide-row { padding: 16px 0; }
  .rl-guide-row strong { font-size: 16px; }
  .rl-system-layout { gap: 34px; }
  .rl-system-visual { min-height: 270px; }
  .rl-section-head .rl-text-link { display: inline-flex; margin-top: 18px; }
  .rl-case-layout { gap: 0; }
  .rl-lead-case { min-height: 300px; }
  .rl-case-row { padding-block: 17px; }
  .rl-domain-row { grid-template-columns: 28px minmax(0,1fr) 20px; gap: 12px; }
  .rl-domain-copy strong { font-size: 19px; }
  .rl-domain-copy small { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .rz-library *, .rz-library *::before, .rz-library *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
