.cs.lzc-hub { --cs-ink: #10213e; --cs-blue: #315fd6; --cs-muted: #78859b; --cs-line: #e3e9f3; --cs-orange: #ee7859; }
.cs { color: var(--cs-ink); background: rgb(255, 255, 255); font: 15px / 1.75 -apple-system, BlinkMacSystemFont, SF Pro Text, PingFang SC, Helvetica Neue, Arial, sans-serif; }
.cs * { box-sizing: border-box; }
.cs h1, .cs h2, .cs h3, .cs p, .cs figure { margin: 0px; }
.cs h1, .cs h2, .cs h3 { font-weight: 580; letter-spacing: -0.028em; }
.cs a { color: inherit; text-decoration: none; }
.cs button, .cs input, .cs select { font: inherit; }
.cs button { cursor: pointer; }
.cs img { max-width: 100%; display: block; }
.cs [hidden] { display: none !important; }
.cs a:focus-visible, .cs button:focus-visible, .cs summary:focus-visible { outline: 2px solid var(--cs-blue); outline-offset: 4px; }
.cs-wrap { width: min(1240px, 100% - (2 * clamp(22px, 4vw, 48px))); margin: auto; }
.cs-eyebrow { display: flex; align-items: center; gap: 12px; font-size: 10px; letter-spacing: 0.14em; font-weight: 700; color: rgb(111, 135, 181); }
.cs-eyebrow::before { content: ""; width: 23px; height: 2px; background: var(--cs-orange); flex: 0 0 auto; }
.cs-button { display: inline-flex; align-items: center; gap: 22px; border-radius: 30px; padding: 7px 8px 7px 19px; background: var(--cs-blue); color: rgb(255, 255, 255) !important; font-size: 12px; font-weight: 650; }
.cs-button i { display: grid; place-items: center; width: 32px; height: 32px; background: rgb(255, 255, 255); color: var(--cs-blue); border-radius: 50%; font-size: 17px; font-style: normal; }
.cs-button:hover { background: rgb(36, 76, 180); box-shadow: rgba(49, 95, 214, 0.17) 0px 8px 24px; }
.cs-hero { position: relative; overflow: hidden; padding: 57px 0px 53px; background: radial-gradient(at 0px 0px, rgb(231, 239, 255), transparent 60%), radial-gradient(at 100% 75%, rgb(255, 240, 232), transparent 38%), rgb(246, 248, 253); }
.cs-hero-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 7%; align-items: center; }
.cs h1 { font-size: 53px; line-height: 1.2; margin: 20px 0px 17px; }
.cs-hero-subtitle { font-size: 31px; line-height: 1.55; color: var(--cs-blue); font-weight: 550; letter-spacing: -0.025em; }
.cs-hero-copy > p { color: var(--cs-muted); font-size: 14px; line-height: 1.9; margin: 20px 0px 27px; max-width: 470px; }
.cs-hero-bottom { display: flex; align-items: center; gap: 20px; }
.cs-hero-bottom > span { font-size: 10px; color: rgb(135, 151, 175); }
.cs-focus { position: relative; min-width: 0px; }
.cs-photo { position: relative; overflow: hidden; border-radius: 15px; background: rgb(18, 49, 94); aspect-ratio: 1.31 / 1; }
.cs-photo img { width: 100%; height: 100%; object-fit: cover; }
.cs-photo::after { content: ""; position: absolute; inset: 0px; background: linear-gradient(180deg, rgba(16, 39, 68, 0.03) 30%, rgba(11, 32, 54, 0.79)); }
.cs-scene-label { position: absolute; z-index: 1; top: 20px; left: 20px; display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 20px; background: rgba(255, 255, 255, 0.93); color: rgb(88, 117, 160); font-size: 9px; }
.cs-scene-label::before { content: ""; width: 5px; height: 5px; background: var(--cs-orange); border-radius: 50%; }
.cs-focus-caption { position: absolute; z-index: 1; left: 25px; bottom: 25px; right: 25px; color: rgb(255, 255, 255); }
.cs-focus-caption > span { font-size: 8px; letter-spacing: 0.15em; color: rgb(200, 216, 240); }
.cs-focus-caption h2 { font-size: 24px; line-height: 1.4; margin: 9px 0px; }
.cs-focus-caption p { font-size: 11px; color: rgb(207, 219, 237); max-width: 390px; }
.cs-focus-nav { position: relative; margin: -1px 20px 0px; display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid rgb(224, 231, 244); box-shadow: rgba(20, 55, 104, 0.04) 0px 12px 30px; border-radius: 0px 0px 12px 12px; overflow: hidden; background: rgb(255, 255, 255); }
.cs-focus-nav button { font-size: 10px; line-height: 1.6; color: rgb(131, 144, 165); border-width: 0px 0px 2px; border-style: none none solid; border-color: currentcolor currentcolor transparent; border-image: none; background: rgb(255, 255, 255); padding: 15px 8px; min-width: 0px; }
.cs-focus-nav button + button { border-left: 1px solid rgb(237, 240, 245); }
.cs-focus-nav button[aria-selected=true] { color: var(--cs-blue); background: rgb(240, 244, 255); border-bottom-color: var(--cs-blue); }
.cs-focus-nav button > span { display: block; font-size: 7px; letter-spacing: 0.08em; margin-bottom: 3px; color: rgb(155, 169, 191); }
.cs-briefband { border-top: 1px solid rgb(228, 234, 244); border-bottom: 1px solid rgb(228, 234, 244); padding: 22px 0px; background: rgb(255, 255, 255); }
.cs-briefband .cs-wrap { display: grid; grid-template-columns: 1fr 2.35fr; gap: 45px; align-items: center; }
.cs-briefband strong { font-size: 13px; font-weight: 550; }
.cs-briefband p { font-size: 11px; color: rgb(141, 154, 175); margin-top: 3px; }
.cs-brief-items { display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; }
.cs-brief-items div { border-left: 1px solid var(--cs-line); padding-left: 20px; }
.cs-brief-items small { font-size: 9px; color: rgb(147, 164, 191); display: block; margin-bottom: 3px; }
.cs-brief-items span { font-size: 12px; color: rgb(80, 104, 138); }
.cs-library { padding: 67px 0px 70px; scroll-margin-top: 105px; }
.cs-section-head { display: flex; justify-content: space-between; align-items: end; gap: 30px; }
.cs h2 { font-size: 32px; line-height: 1.45; }
.cs-section-head h2 { margin-top: 15px; }
.cs-section-head > p { color: var(--cs-muted); font-size: 12px; line-height: 1.9; max-width: 300px; }
.cs-tools { display: flex; align-items: center; justify-content: space-between; gap: 25px; border-bottom: 1px solid var(--cs-line); padding: 28px 0px 22px; }
.cs-filter { display: flex; gap: 8px; flex-wrap: wrap; }
.cs-filter a { font-size: 12px; padding: 9px 17px; border-radius: 25px; background: rgb(243, 246, 250); color: rgb(96, 113, 137); white-space: nowrap; transition: 0.2s; }
.cs-filter a:hover, .cs-filter a.is-active { color: rgb(255, 255, 255); background: var(--cs-blue); }
.cs-search { display: flex; gap: 8px; align-items: center; background: rgb(255, 255, 255); border: 1px solid rgb(225, 232, 243); border-radius: 25px; padding: 0px 14px 0px 16px; margin: 0px; }
.cs-search input { font-size: 11px; background: none; border: 0px; outline: 0px; min-width: 0px; width: 175px; padding: 11px 0px; color: var(--cs-ink); }
.cs-search input::placeholder { color: rgb(154, 168, 188); }
.cs-search button { border: 0px; background: none; color: var(--cs-blue); padding: 5px; display: grid; place-items: center; }
.cs-search:focus-within { border-color: rgb(130, 158, 233); box-shadow: rgba(49, 95, 214, 0.04) 0px 0px 0px 3px; }
.cs-results-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0px; }
.cs-results-head > div { display: flex; align-items: center; gap: 12px; }
.cs-current { font-size: 14px; font-weight: 600; }
.cs-count { font-size: 10px; color: rgb(152, 165, 184); }
.cs-results-head label { font-size: 10px; color: rgb(150, 163, 184); }
.cs-sort { background: none; border: 0px; font-size: 11px !important; padding: 5px; color: rgb(110, 125, 148); }
.cs-design-note { display: flex; align-items: center; justify-content: space-between; gap: 20px; background: rgb(248, 250, 255); border: 1px solid rgb(232, 238, 249); border-radius: 8px; padding: 11px 16px; margin-bottom: 20px; color: rgb(139, 154, 178); font-size: 10px; }
.cs-design-note button { border: 0px; background: none; color: var(--cs-blue); font-size: 10px; white-space: nowrap; }
.cs-status { font-size: 11px; color: rgb(138, 153, 178); }
.cs-status:not(:empty) { padding: 0px 0px 14px; }
.cs-grid { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 26px; }
.cs-card { min-width: 0px; border: 1px solid var(--cs-line); border-radius: 13px; overflow: hidden; background: rgb(255, 255, 255); display: flex; flex-direction: column; transition: 0.25s; }
.cs-card:hover { transform: translateY(-4px); box-shadow: rgba(20, 55, 105, 0.063) 0px 12px 34px; border-color: rgb(188, 204, 240); }
.cs-card-image { position: relative; aspect-ratio: 1.65 / 1; overflow: hidden; display: block; background: rgb(237, 242, 251); }
.cs-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.cs-card:hover img { transform: scale(1.035); }
.cs-example-badge { position: absolute; top: 13px; left: 13px; border-radius: 20px; padding: 4px 9px; font-size: 8px; background: rgba(255, 255, 255, 0.94); color: rgb(100, 129, 175); border: 1px solid rgba(255, 255, 255, 0.5); }
.cs-card-body { display: flex; flex-direction: column; flex: 1 1 0%; padding: 22px; }
.cs-card-category { display: flex; justify-content: space-between; align-items: center; color: var(--cs-blue); font-size: 10px; }
.cs-card-category > span:last-child { font-size: 8px; color: rgb(155, 168, 189); letter-spacing: 0.09em; }
.cs-card h3 { font-size: 20px; line-height: 1.55; margin: 13px 0px 12px; }
.cs-card h3 button { padding: 0px; margin: 0px; background: none; border: 0px; text-align: left; font: inherit; color: inherit; letter-spacing: inherit; }
.cs-card h3 a:hover, .cs-card h3 button:hover { color: var(--cs-blue); }
.cs-card-summary { font-size: 12px; color: var(--cs-muted); line-height: 1.85; display: -webkit-box; line-clamp: 2 -webkit-legacy; -webkit-box-orient: vertical; overflow: hidden; }
.cs-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 18px; margin-bottom: 23px; }
.cs-tags span { font-size: 9px; padding: 4px 8px; background: rgb(245, 247, 251); color: rgb(135, 150, 174); border-radius: 4px; }
.cs-card-end { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 15px; border-top: 1px solid var(--cs-line); font-size: 9px; color: rgb(152, 166, 187); }
.cs-card-end a, .cs-card-end button { border: 0px; background: none; padding: 0px; font-size: 11px; font-weight: 550; color: var(--cs-blue); }
.cs-pagination { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 33px; }
.cs-pagination:empty { display: none; }
.cs-pagination button { border: 1px solid var(--cs-line); background: rgb(255, 255, 255); color: rgb(123, 140, 166); min-width: 35px; height: 35px; padding: 0px 12px; border-radius: 25px; font-size: 11px; }
.cs-pagination button.is-active { background: var(--cs-blue); border-color: var(--cs-blue); color: rgb(255, 255, 255); }
.cs-empty { grid-column: 1 / -1; display: flex; align-items: center; flex-direction: column; justify-content: center; text-align: center; padding: 50px 20px; min-height: 250px; border: 1px dashed rgb(213, 223, 241); border-radius: 12px; background: rgb(250, 251, 254); }
.cs-empty > span { font-size: 9px; letter-spacing: 0.15em; color: rgb(147, 166, 197); }
.cs-empty h3 { font-size: 23px; margin: 15px 0px 8px; }
.cs-empty p { font-size: 12px; color: var(--cs-muted); }
.cs-empty button { margin-top: 20px; border: 0px; background: none; color: var(--cs-blue); font-size: 11px; }
.cs-method { padding: 70px 0px; background: linear-gradient(120deg, rgb(238, 243, 253), rgb(247, 249, 253) 65%, rgb(252, 246, 242)); }
.cs-method-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 10%; margin-top: 32px; align-items: start; }
.cs-method-intro { position: relative; padding: 30px 30px 33px; border: 1px solid rgb(223, 231, 245); border-radius: 13px; background: rgb(255, 255, 255); }
.cs-folder-top { display: flex; justify-content: space-between; border-bottom: 1px solid rgb(232, 237, 246); padding-bottom: 16px; color: rgb(140, 157, 185); font-size: 8px; letter-spacing: 0.1em; }
.cs-method-intro h3 { font-size: 25px; line-height: 1.5; margin: 24px 0px 16px; }
.cs-method-intro h3 span { color: var(--cs-blue); }
.cs-method-intro > p { font-size: 12px; line-height: 1.9; color: var(--cs-muted); }
.cs-folder-bottom { display: flex; align-items: center; gap: 9px; margin-top: 25px; color: rgb(166, 179, 198); font-size: 8px; letter-spacing: 0.12em; }
.cs-folder-bottom::before { content: ""; width: 20px; height: 2px; background: var(--cs-orange); }
.cs-method-steps details { padding: 21px 0px; border-top: 1px solid rgb(220, 229, 244); }
.cs-method-steps details:last-child { border-bottom: 1px solid rgb(220, 229, 244); }
.cs-method-steps summary { cursor: pointer; display: grid; grid-template-columns: 40px 1fr 20px; align-items: center; gap: 10px; list-style: none; }
.cs-method-steps summary::-webkit-details-marker { display: none; }
.cs-method-steps summary::after { content: "+"; color: rgb(144, 161, 188); font-size: 20px; }
.cs-method-steps details[open] summary::after { content: "−"; color: var(--cs-blue); }
.cs-method-steps summary > span { color: rgb(155, 176, 211); font-size: 10px; }
.cs-method-steps summary strong { font-size: 18px; font-weight: 550; }
.cs-method-steps details[open] summary strong { color: var(--cs-blue); }
.cs-method-steps details p { font-size: 12px; color: var(--cs-muted); line-height: 1.9; margin: 14px 30px 0px 50px; }
.cs-method-steps details small { display: block; margin: 13px 30px 0px 50px; font-size: 10px; color: rgb(107, 137, 185); }
.cs-contact { padding: 65px 0px; }
.cs-contact-panel { border-radius: 16px; overflow: hidden; display: grid; grid-template-columns: 1.35fr 0.65fr; background: linear-gradient(115deg, rgb(23, 58, 122), rgb(49, 95, 214)); color: rgb(255, 255, 255); }
.cs-contact-copy { padding: 35px 40px; }
.cs-contact-copy > span { font-size: 9px; letter-spacing: 0.14em; color: rgb(166, 191, 233); }
.cs-contact-copy h2 { font-size: 31px; line-height: 1.5; margin: 12px 0px; }
.cs-contact-copy p { font-size: 12px; color: rgb(183, 203, 240); max-width: 590px; }
.cs-contact-action { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 17px; padding: 30px; border-left: 1px solid rgba(255, 255, 255, 0.125); background: rgba(255, 255, 255, 0.024); }
.cs-contact-action > .cs-button { background: rgb(255, 255, 255); color: var(--cs-blue) !important; }
.cs-contact-action > .cs-button i { background: rgb(238, 243, 255); }
.cs-contact-action > span { font-size: 9px; color: rgb(169, 192, 231); }
.cs-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; }
.cs-dialog { border: 1px solid rgb(216, 226, 244); border-radius: 18px; padding: 0px; width: min(620px, 100% - 36px); max-height: 85vh; color: var(--cs-ink); box-shadow: rgba(16, 33, 62, 0.25) 0px 25px 90px; font-family: inherit; }
.cs-dialog::backdrop { background: rgba(11, 32, 62, 0.467); backdrop-filter: blur(5px); }
.cs-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 25px; background: rgb(244, 247, 254); font-size: 10px; color: rgb(113, 139, 183); }
.cs-dialog-head button { width: 30px; height: 30px; border: 1px solid rgb(220, 229, 245); border-radius: 50%; background: rgb(255, 255, 255); color: rgb(113, 135, 171); font-size: 19px; line-height: 1; }
.cs-dialog-body { padding: 26px; }
.cs-dialog-body h2 { font-size: 26px; margin: 12px 0px; }
.cs-dialog-body > span { font-size: 10px; color: var(--cs-blue); }
.cs-dialog-body > p { font-size: 12px; color: var(--cs-muted); margin: 15px 0px; line-height: 1.9; }
.cs-dialog-body dl { margin: 25px 0px 0px; display: grid; gap: 15px; }
.cs-dialog-body dt { font-size: 12px; color: rgb(59, 96, 155); font-weight: 600; }
.cs-dialog-body dd { font-size: 12px; color: var(--cs-muted); margin: 5px 0px 0px; line-height: 1.9; }
@media (max-width: 1100px) {
  .cs-hero-grid { gap: 4%; }
  .cs h1 { font-size: 45px; }
  .cs-hero-subtitle { font-size: 27px; }
  .cs-photo { aspect-ratio: 1.1 / 1; }
  .cs-focus-caption h2 { font-size: 21px; }
  .cs-focus-nav { margin-left: 10px; margin-right: 10px; }
  .cs-focus-nav button { font-size: 9px; padding-inline: 4px; }
  .cs-tools { align-items: stretch; flex-direction: column; gap: 18px; }
  .cs-search { max-width: 350px; }
  .cs-search input { width: 100%; }
  .cs-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
  .cs-method-grid { gap: 5%; }
  .cs-briefband .cs-wrap { gap: 25px; }
  .cs-brief-items { gap: 10px; }
  .cs-brief-items div { padding-left: 12px; }
}
@media (max-width: 760px) {
  .cs-hero { padding: 37px 0px 40px; }
  .cs-hero-grid { grid-template-columns: 1fr; gap: 30px; }
  .cs h1 { font-size: 40px; margin-top: 16px; }
  .cs-hero-subtitle { font-size: 27px; }
  .cs-hero-copy > p { font-size: 13px; }
  .cs-hero-bottom { gap: 15px; }
  .cs-photo { aspect-ratio: 1.35 / 1; }
  .cs-focus-nav button { padding: 13px 4px; font-size: 9px; }
  .cs-focus-nav button > span { font-size: 6px; }
  .cs-focus-caption { left: 20px; bottom: 20px; right: 20px; }
  .cs-focus-caption h2 { font-size: 22px; }
  .cs-briefband { padding: 22px 0px; }
  .cs-briefband .cs-wrap { grid-template-columns: 1fr; gap: 19px; }
  .cs-brief-items { grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 6px; }
  .cs-brief-items div { padding-left: 10px; }
  .cs-brief-items span { font-size: 10px; }
  .cs-library, .cs-method { padding: 45px 0px; }
  .cs-section-head { display: block; }
  .cs h2 { font-size: 26px; }
  .cs-section-head > p { margin-top: 14px; }
  .cs-tools { padding: 23px 0px 19px; }
  .cs-filter { gap: 7px; }
  .cs-filter a { font-size: 11px; padding: 8px 13px; }
  .cs-search { max-width: none; }
  .cs-design-note { font-size: 9px; align-items: start; gap: 10px; padding: 10px 12px; }
  .cs-design-note button { font-size: 9px; }
  .cs-grid { grid-template-columns: 1fr; gap: 23px; }
  .cs-card h3 { font-size: 21px; }
  .cs-method-grid { grid-template-columns: 1fr; gap: 28px; }
  .cs-method-intro { padding: 24px; }
  .cs-method-intro h3 { font-size: 24px; }
  .cs-method-steps summary strong { font-size: 17px; }
  .cs-contact { padding: 43px 0px; }
  .cs-contact-panel { grid-template-columns: 1fr; }
  .cs-contact-copy { padding: 28px 25px; }
  .cs-contact-copy h2 { font-size: 26px; }
  .cs-contact-action { border-left: 0px; border-top: 1px solid rgba(255, 255, 255, 0.125); align-items: start; padding: 24px 25px; }
  .cs-dialog-body { padding: 23px; }
  .cs-dialog-body h2 { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  .cs * { transition: none !important; }
}