/* Portal styles: base layout, shared interface, responsive states. */

@layer components, site-base, site;
@layer site-base {
html:has(body.material) {
  color:var(--kcds-color-text-primary);
  background:var(--kcds-color-surface-canvas);
  font-family:var(--kcds-font-site);
  font-synthesis:none
}
:where(body.material) * {
  box-sizing:border-box
}
body.material {
  margin:0;
  background:var(--kcds-color-surface-canvas)
}
:where(body.material) a {
  color:inherit;
  text-decoration:none
}
:where(body.material) button,
:where(body.material) input {
  font:inherit
}
:where(body.material) button {
  cursor:pointer;
  color:inherit
}
:where(body.material) svg {
  width:24px;
  height:24px;
  flex-shrink:0
}
:where(body.material) img {
  max-width:100%;
  display:block
}
:where(body.material) a,
:where(body.material) button {
  -webkit-tap-highlight-color:transparent
}
:where(body.material) button {
  touch-action:manipulation
}
:where(body.material) h1,
:where(body.material) h2,
:where(body.material) h3,
:where(body.material) h4,
:where(body.material) p {
  margin-top:0
}
:where(body.material) h1,
:where(body.material) h2,
:where(body.material) h3,
:where(body.material) h4 {
  line-height:1.06;
  letter-spacing:-.045em
}
:where(body.material) h2 {
  font-size:clamp(38px,5vw,68px);
  font-weight:800
}
:where(body.material) h3 {
  font-size:28px
}
:where(body.material) p {
  font-size:18px;
  line-height:1.6;
  color:var(--kcds-color-text-secondary)
}
html:has(body.material) {
  scroll-behavior:smooth;
  scroll-padding-top:90px
}
:where(body.material) :focus-visible {
  outline:3px solid var(--kcds-blue-500);
  outline-offset:5px
}
:where(body.material) .skip {
  position:fixed;
  top:-60px;
  left:20px;
  padding:15px;
  background:var(--kcds-gray-0);
  z-index:100
}
:where(body.material) .skip:focus {
  top:10px
}
:where(body.material) .wordmark {
  display:flex;
  align-items:center;
  font-size:24px;
  letter-spacing:-.05em;
  white-space:nowrap
}
:where(body.material) .wordmark span {
  font-weight:800
}
:where(body.material) .wordmark b {
  font-weight:400
}
:where(body.material) .section-dots {
  position:fixed;
  left:19px;
  top:36vh;
  z-index:20;
  display:flex;
  flex-direction:column;
  gap:18px;
  padding:12px 6px;
  background:color-mix(in srgb,var(--kcds-color-surface-canvas) 70%,transparent);
  border-radius:20px
}
:where(body.material) .section-dots a {
  width:11px;
  height:11px;
  border-radius:20px;
  background:var(--kcds-site-material-background-75);
  transition:height .25s,background .25s
}
:where(body.material) .section-dots a.active {
  height:22px;
  background:var(--kcds-site-material-background-76)
}
:where(body.material) .hero-dots {
  position:absolute;
  inset:0;
  z-index:0;
  background-image:radial-gradient(var(--kcds-site-material-background-image-3) 1.5px,transparent 1.5px);
  background-size:28px 28px;
  mask-image:linear-gradient(transparent,var(--kcds-site-material-mask-image-2) 15%,var(--kcds-site-material-mask-image-2) 80%,transparent);
  opacity:.6
}
:where(body.material) .hero-baseline {
  display:flex;
  align-items:end;
  justify-content:space-between;
  position:relative;
  z-index:1;
  margin-top:25px
}
:where(body.material) .hero-baseline p {
  font-size:15px;
  margin:0
}
:where(body.material) .hero-baseline>a {
  display:flex;
  align-items:center;
  gap:20px;
  font-size:15px
}
:where(body.material) .hero-baseline svg {
  transform:rotate(90deg);
  color:var(--kcds-site-material-color-46)
}
:where(body.material) .cursor-tag {
  position:absolute;
  font-size:17px;
  font-weight:700;
  padding:7px 16px;
  border-radius:30px;
  z-index:2;
  color:var(--kcds-gray-0);
  animation:cursor-drift 7s ease-in-out infinite
}
:where(body.material) .cursor-tag i {
  position:absolute;
  width:0;
  height:0;
  border-left:11px solid transparent;
  border-right:6px solid transparent;
  border-bottom:20px solid var(--cursor);
  bottom:-18px;
  left:45px;
  transform:rotate(130deg)
}
:where(body.material) .cursor-learn {
  top:19%;
  left:6%;
  background:var(--kcds-vermilion-500)
}
:where(body.material) .cursor-hire {
  top:21%;
  left:76%;
  background:var(--kcds-periwinkle-500);
  animation-delay:-3s
}
:where(body.material) .cursor-grow {
  bottom:19%;
  left:48%;
  background:var(--kcds-emerald-500);
  animation-delay:-5s
}
:where(body.material) .cursor-grow i {
  left:-6px;
  bottom:22px;
  transform:rotate(-40deg)
}
@keyframes cursor-drift {
50% {
  transform:translate(15px,-10px)
}
}
:where(body.material) .stories {
  background:var(--kcds-color-surface-default);
  padding:90px 5.5vw
}
:where(body.material) .feature-story {
  display:grid;
  grid-template-columns:1.7fr 1fr;
  border-radius:40px;
  background:var(--kcds-site-material-background-77);
  overflow:hidden;
  min-height:510px;
  padding:8px;
  gap:8px
}
:where(body.material) .feature-art {
  position:relative;
  overflow:hidden;
  border-radius:33px 0 0 33px;
  background:var(--kcds-site-material-background-78)
}
:where(body.material) .feature-art>img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .8s
}
:where(body.material) .feature-story:hover .feature-art>img {
  transform:scale(1.04)
}
:where(body.material) .feature-art>span {
  position:absolute;
  left:28px;
  bottom:25px;
  background:var(--kcds-site-material-background-79);
  color:var(--kcds-site-material-background-77);
  border-radius:16px;
  padding:14px 18px;
  font-size:14px;
  line-height:1.25;
  letter-spacing:.04em
}
:where(body.material) .feature-copy {
  background:var(--kcds-site-material-background-80);
  border-radius:32px;
  padding:34px 30px;
  display:flex;
  flex-direction:column;
  color:var(--kcds-site-material-background-77)
}
:where(body.material) .category {
  display:inline-flex;
  align-self:start;
  font-size:12px;
  padding:4px 8px;
  background:var(--kcds-violet-50);
  color:var(--kcds-site-material-color-47);
  border-radius:4px;
  line-height:1.3
}
:where(body.material) .feature-copy h2 {
  font-size:clamp(35px,3.3vw,53px);
  margin:24px 0 20px;
  letter-spacing:-.035em
}
:where(body.material) .feature-copy p {
  font-size:16px;
  color:var(--kcds-site-material-color-48)
}
:where(body.material) .feature-link {
  display:flex;
  gap:16px;
  align-items:center;
  font-size:15px;
  font-weight:700;
  margin-top:auto;
  padding-top:25px
}
:where(body.material) .feature-link svg {
  color:var(--kcds-site-material-color-49)
}
:where(body.material) .product-cards {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:22px;
  margin-top:30px
}
:where(body.material) .product-art {
  height:255px;
  position:relative;
  overflow:hidden;
  border-radius:32px;
  background:var(--kcds-color-primary-tint);
  display:flex;
  justify-content:center;
  align-items:center
}
:where(body.material) .product-card-copy {
  text-align:center;
  padding:20px 5px
}
:where(body.material) .product-card-copy h3 {
  font-size:21px;
  line-height:1.22;
  letter-spacing:-.02em;
  margin:12px 0
}
:where(body.material) .product-card-copy p {
  font-size:12px;
  line-height:1.6
}
:where(body.material) .product-card .product-art {
  transition:transform .4s
}
:where(body.material) .product-card:hover .product-art {
  transform:translateY(-5px)
}
:where(body.material) .learning-tile {
  background:var(--kcds-gray-0);
  border-radius:18px;
  padding:24px 18px;
  width:83%;
  transform:rotate(-8deg);
  box-shadow:0 15px 30px var(--kcds-site-material-box-shadow-17);
  color:var(--kcds-vermilion-700)
}
:where(body.material) .learning-tile>span {
  font-size:9px;
  letter-spacing:.05em
}
:where(body.material) .learning-tile>b {
  font-size:25px;
  line-height:1.05;
  display:block;
  margin-top:17px;
  letter-spacing:-.035em
}
:where(body.material) .learning-tile>small {
  font-size:9px
}
:where(body.material) .mini-progress {
  height:8px;
  background:var(--kcds-vermilion-50);
  border-radius:6px;
  margin:25px 0 12px
}
:where(body.material) .mini-progress span {
  display:block;
  background:var(--kcds-vermilion-500);
  height:100%;
  width:65%;
  border-radius:6px
}
:where(body.material) .safety-seal {
  width:118px;
  height:118px;
  border-radius:50%;
  background:var(--kcds-blue-500);
  color:var(--kcds-gray-0);
  position:absolute;
  top:35px;
  box-shadow:0 0 0 18px var(--kcds-site-material-box-shadow-18)
}
:where(body.material) .safety-seal svg {
  width:70px;
  height:70px;
  margin:24px
}
:where(body.material) .safety-label {
  text-align:center;
  margin-top:175px;
  color:var(--kcds-blue-600);
  font-size:20px;
  line-height:1.1;
  font-weight:800
}
:where(body.material) .growth-bars {
  display:flex;
  align-items:end;
  gap:10px;
  height:160px;
  width:78%;
  transform:rotate(-7deg);
  margin-top:12px
}
:where(body.material) .growth-bars i {
  flex:1;
  background:var(--kcds-emerald-500);
  border-radius:25px 25px 9px 9px
}
:where(body.material) .growth-bars i:nth-child(2n) {
  background:var(--kcds-emerald-300)
}
:where(body.material) .growth-caption {
  position:absolute;
  top:23px;
  left:22px;
  color:var(--kcds-emerald-700);
  font-size:24px;
  letter-spacing:-.04em
}
:where(body.material) .people-stack {
  display:flex;
  position:absolute;
  top:45px;
  left:22px
}
:where(body.material) .people-stack>span {
  width:80px;
  height:80px;
  border:5px solid var(--kcds-periwinkle-50);
  border-radius:50%;
  display:grid;
  place-items:center;
  margin-left:-12px;
  color:var(--kcds-gray-0);
  background:var(--kcds-periwinkle-500);
  font-size:24px;
  font-weight:700;
  transform:rotate(-8deg)
}
:where(body.material) .people-stack>span:nth-child(2) {
  background:var(--kcds-site-material-background-81);
  transform:translateY(16px)
}
:where(body.material) .people-stack>span:nth-child(3) {
  background:var(--kcds-site-material-background-82)
}
:where(body.material) .welcome-label {
  color:var(--kcds-periwinkle-700);
  font-size:27px;
  font-weight:800;
  line-height:1.1;
  margin-top:130px;
  letter-spacing:-.04em
}
:where(body.material) .pill-link {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  border:1px solid var(--kcds-color-border-subtle);
  border-radius:40px;
  padding:16px 25px;
  font-size:18px;
  font-weight:700;
  line-height:1.2;
  background:var(--kcds-color-surface-canvas);
  width:fit-content
}
:where(body.material) .pill-link svg {
  width:20px;
  color:var(--kcds-orange-700)
}
:where(body.material) .pill-link:hover {
  border-color:var(--kcds-site-material-border-color-5);
  background:color-mix(in srgb,var(--kcds-color-surface-canvas),var(--kcds-orange-500) 5%)
}
:where(body.material) .centered {
  display:flex;
  margin:25px auto 0
}
:where(body.material) .language-scene {
  position:relative;
  min-height:860px;
  overflow:hidden;
  padding:115px 5.5vw 0;
  background:var(--kcds-color-surface-canvas)
}
:where(body.material) .language-copy {
  max-width:500px;
  position:relative;
  z-index:3
}
:where(body.material) .language-copy h2 {
  margin-bottom:24px
}
:where(body.material) .language-copy p {
  font-size:17px;
  max-width:430px
}
:where(body.material) .language-copy .pill-link {
  margin-top:12px
}
:where(body.material) .interface-stage {
  position:absolute;
  width:850px;
  top:255px;
  right:-50px;
  transform:rotate(-14deg) skew(8deg,4deg);
  z-index:1
}
:where(body.material) .interface-stage:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(140deg,transparent 55%,var(--kcds-color-surface-canvas));
  pointer-events:none
}
:where(body.material) .dashboard {
  background:var(--kcds-gray-0);
  color:var(--kcds-site-material-background-77);
  border:1px solid var(--kcds-site-material-border-12);
  border-radius:14px;
  display:grid;
  grid-template-columns:150px 1fr;
  overflow:hidden;
  box-shadow:0 35px 85px var(--kcds-site-material-box-shadow-19),0 5px 15px var(--kcds-site-material-box-shadow-20);
  font-size:12px
}
:where(body.material) .dash-side {
  padding:25px 18px;
  background:var(--kcds-site-material-background-83);
  border-right:1px solid var(--kcds-site-material-border-12);
  display:flex;
  flex-direction:column;
  gap:20px
}
:where(body.material) .dash-side>img {
  margin-bottom:4px
}
:where(body.material) .dash-side>b {
  font-size:19px
}
:where(body.material) .dash-side>span {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:10px;
  color:var(--kcds-site-material-color-50)
}
:where(body.material) .dash-side svg {
  width:15px;
  height:15px
}
:where(body.material) .dash-side>.selected {
  color:var(--kcds-vermilion-500);
  background:var(--kcds-vermilion-50);
  padding:10px;
  margin:0 -8px;
  border-radius:5px
}
:where(body.material) .dash-user {
  margin-top:auto;
  font-size:12px
}
:where(body.material) .dash-user small {
  margin-left:10px;
  font-size:10px
}
:where(body.material) .dash-body {
  padding:20px 27px 35px
}
:where(body.material) .dash-top {
  display:flex;
  justify-content:space-between;
  font-size:10px;
  color:var(--kcds-site-material-color-51);
  border-bottom:1px solid var(--kcds-site-material-border-12);
  padding-bottom:18px
}
:where(body.material) .dash-greeting {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:28px
}
:where(body.material) .dash-greeting small {
  font-size:8px;
  letter-spacing:.1em;
  color:var(--kcds-site-material-color-52)
}
:where(body.material) .dash-greeting h3 {
  font-size:31px;
  margin:10px 0;
  letter-spacing:-.025em
}
:where(body.material) .dash-greeting p {
  font-size:11px;
  color:var(--kcds-site-material-color-53)
}
:where(body.material) .avatar {
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--kcds-violet-50);
  color:var(--kcds-periwinkle-500);
  width:42px;
  height:42px;
  font-size:12px
}
:where(body.material) .dash-stats {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin:20px 0
}
:where(body.material) .dash-stats>div {
  border:1px solid var(--kcds-site-material-border-13);
  border-radius:8px;
  padding:15px
}
:where(body.material) .dash-stats small {
  font-size:9px;
  color:var(--kcds-site-material-color-54);
  display:block
}
:where(body.material) .dash-stats b {
  font-size:30px;
  display:block;
  margin-top:9px
}
:where(body.material) .dash-stats em {
  font-style:normal;
  font-size:9px;
  color:var(--kcds-emerald-500);
  font-weight:400
}
:where(body.material) .dash-course {
  display:grid;
  grid-template-columns:1fr 1.2fr;
  border:1px solid var(--kcds-site-material-border-14);
  border-radius:10px;
  overflow:hidden
}
:where(body.material) .course-cover {
  padding:30px 20px;
  background:var(--kcds-vermilion-50);
  color:var(--kcds-vermilion-500);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  font-weight:800;
  font-size:21px;
  line-height:1.1;
  letter-spacing:-.03em
}
:where(body.material) .course-cover>svg {
  width:55px;
  height:55px;
  margin-bottom:25px
}
:where(body.material) .dash-course>div:last-child {
  padding:24px
}
:where(body.material) .dash-course small {
  font-size:8px;
  letter-spacing:.04em;
  color:var(--kcds-site-material-color-55)
}
:where(body.material) .dash-course h4 {
  font-size:20px;
  letter-spacing:-.025em;
  margin:12px 0
}
:where(body.material) .dash-course p {
  font-size:10px;
  color:var(--kcds-site-material-color-56)
}
:where(body.material) .dash-course span {
  font-size:9px;
  color:var(--kcds-site-material-color-57)
}
:where(body.material) .progress {
  height:5px;
  background:var(--kcds-site-material-background-84);
  border-radius:8px;
  margin:18px 0 8px
}
:where(body.material) .progress i {
  height:100%;
  display:block;
  width:60%;
  background:var(--kcds-vermilion-500);
  border-radius:8px
}
:where(body.material) .fake-button {
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--kcds-vermilion-500);
  color:var(--kcds-gray-0);
  padding:10px;
  border-radius:5px;
  margin-top:20px;
  font-size:10px;
  gap:10px
}
:where(body.material) .fake-button svg {
  width:13px;
  height:13px
}
:where(body.material) .floating-label {
  position:absolute;
  z-index:4;
  background:var(--kcds-gray-0);
  border-radius:30px;
  box-shadow:0 4px 20px var(--kcds-site-material-box-shadow-21);
  padding:12px 20px;
  font-size:16px;
  display:flex;
  align-items:center;
  gap:10px
}
:where(body.material) .fl-color {
  top:-24px;
  left:220px;
  transform:rotate(12deg);
  color:var(--kcds-blue-500)
}
:where(body.material) .fl-color i {
  width:22px;
  height:22px;
  background:conic-gradient(var(--kcds-vermilion-500),var(--kcds-blue-500),var(--kcds-emerald-500),var(--kcds-periwinkle-500),var(--kcds-vermilion-500));
  border-radius:50%
}
:where(body.material) .fl-type {
  left:-55px;
  top:100px;
  color:var(--kcds-site-material-color-58)
}
:where(body.material) .fl-space {
  bottom:-20px;
  left:80px;
  color:var(--kcds-emerald-500)
}
:where(body.material) .ai-section {
  padding:95px 5.5vw;
  min-height:600px;
  background:linear-gradient(125deg,var(--kcds-site-material-background-85),var(--kcds-site-material-background-86) 65%,var(--kcds-site-material-background-87));
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:50px;
  overflow:hidden;
  color:var(--kcds-site-material-background-77)
}
:where(body.material) .ai-copy p {
  max-width:440px;
  color:var(--kcds-site-material-color-59)
}
:where(body.material) .eyebrow {
  font-size:12px;
  letter-spacing:.13em;
  font-weight:700;
  display:block;
  margin-bottom:25px
}
:where(body.material) .ai-composition {
  position:relative;
  min-height:400px;
  display:grid;
  place-items:center
}
:where(body.material) .ai-orbit {
  position:absolute;
  width:550px;
  height:230px;
  border:44px solid var(--kcds-periwinkle-500);
  border-radius:50%;
  transform:rotate(-30deg)
}
:where(body.material) .orbit-two {
  border-color:var(--kcds-orange-500);
  transform:rotate(35deg);
  width:490px;
  height:185px
}
:where(body.material) .ai-card {
  position:relative;
  z-index:2;
  background:var(--kcds-site-material-background-88);
  border:1px solid white;
  backdrop-filter:blur(15px);
  box-shadow:0 25px 60px var(--kcds-site-material-box-shadow-22);
  border-radius:24px;
  padding:25px;
  width:360px;
  transform:rotate(-4deg)
}
:where(body.material) .ai-card-top {
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--kcds-periwinkle-500);
  font-size:14px
}
:where(body.material) .ai-card-top>span {
  margin-left:auto;
  font-size:8px;
  color:var(--kcds-site-material-color-60)
}
:where(body.material) .ai-card>p {
  font-size:21px;
  color:var(--kcds-site-material-background-77);
  line-height:1.3;
  margin:24px 0 15px
}
:where(body.material) .prompt-example {
  font-size:13px;
  border:1px solid var(--kcds-site-material-border-15);
  padding:15px;
  border-radius:12px;
  background:white
}
:where(body.material) .ai-suggestions {
  display:flex;
  gap:8px;
  margin:13px 0 25px
}
:where(body.material) .ai-suggestions span {
  padding:6px 8px;
  border:1px solid var(--kcds-site-material-border-16);
  border-radius:20px;
  font-size:10px;
  color:var(--kcds-site-material-color-61)
}
:where(body.material) .ai-reply {
  display:flex;
  gap:12px;
  padding:15px;
  border-radius:12px;
  background:var(--kcds-site-material-background-89);
  color:var(--kcds-emerald-700);
  font-size:12px
}
:where(body.material) .ai-reply small {
  display:block;
  font-size:10px;
  line-height:1.5;
  margin-top:7px
}
:where(body.material) .ai-card>a {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:20px;
  font-size:12px;
  color:var(--kcds-periwinkle-700)
}
:where(body.material) .system-section {
  padding:100px 5.5vw
}
:where(body.material) .system-section>h2 {
  max-width:850px;
  margin-bottom:50px
}
:where(body.material) .bento {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:260px 235px 240px;
  gap:20px
}
:where(body.material) .bento>a {
  border-radius:28px;
  overflow:hidden;
  padding:25px;
  position:relative;
  transition:transform .3s;
  color:var(--kcds-site-material-background-77)
}
:where(body.material) .bento>a:hover {
  transform:translateY(-5px)
}
:where(body.material) .bento h3 {
  font-size:23px;
  letter-spacing:-.025em;
  margin-bottom:12px
}
:where(body.material) .tile-arrow {
  position:absolute;
  bottom:20px;
  right:22px;
  width:31px;
  height:31px;
  display:grid;
  place-items:center;
  background:var(--kcds-site-material-background-90);
  border-radius:50%
}
:where(body.material) .tile-arrow svg {
  width:18px
}
:where(body.material) .bento-main {
  grid-row:span 2;
  background:var(--kcds-orange-500);
  display:flex;
  flex-direction:column
}
:where(body.material) .bento-main>span:first-child {
  font-size:11px;
  letter-spacing:.08em
}
:where(body.material) .bento-main h3 {
  font-size:57px;
  margin-top:27px;
  letter-spacing:-.05em
}
:where(body.material) .bento-logo {
  margin-top:auto;
  filter:grayscale(1) brightness(0);
  opacity:.85
}
:where(body.material) .bento-color {
  background:var(--kcds-site-material-background-91)
}
:where(body.material) .color-bars {
  display:flex;
  gap:9px;
  align-items:end;
  height:118px;
  margin-top:20px
}
:where(body.material) .color-bars i {
  flex:1;
  background:var(--kcds-vermilion-500);
  height:68%;
  border-radius:10px
}
:where(body.material) .color-bars i:nth-child(2) {
  height:90%;
  background:var(--kcds-blue-500)
}
:where(body.material) .color-bars i:nth-child(3) {
  height:60%;
  background:var(--kcds-emerald-500)
}
:where(body.material) .color-bars i:nth-child(4) {
  height:100%;
  background:var(--kcds-periwinkle-500)
}
:where(body.material) .color-labels {
  font-size:10px;
  margin-top:10px
}
:where(body.material) .bento-type {
  background:var(--kcds-site-material-background-92)
}
:where(body.material) .bento-type strong {
  font-size:110px;
  line-height:1;
  letter-spacing:-.05em;
  display:block;
  font-weight:400
}
:where(body.material) .bento-type>span:not(.tile-arrow) {
  font-size:12px
}
:where(body.material) .bento-ai {
  background:var(--kcds-site-material-background-93)
}
:where(body.material) .ai-mini {
  display:flex;
  gap:20px;
  align-items:center;
  margin-top:30px
}
:where(body.material) .ai-mini svg {
  width:65px;
  height:65px;
  color:var(--kcds-periwinkle-500)
}
:where(body.material) .ai-mini>span {
  font-size:19px;
  font-weight:700;
  line-height:1.2
}
:where(body.material) .bento-access {
  background:var(--kcds-site-material-background-94)
}
:where(body.material) .focus-demo {
  margin:30px auto 20px;
  background:var(--kcds-gray-0);
  border:2px solid var(--kcds-site-material-border-17);
  outline:3px solid var(--kcds-site-material-outline-2);
  outline-offset:5px;
  border-radius:6px;
  padding:12px 20px;
  max-width:180px;
  font-size:16px;
  display:flex;
  justify-content:space-between
}
:where(body.material) .bento-access>span:not(.tile-arrow) {
  font-size:11px
}
:where(body.material) .bento-tokens {
  grid-column:span 2;
  background:var(--kcds-site-material-background-95)
}
:where(body.material) .bento-tokens>div {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  max-width:550px;
  margin-top:28px
}
:where(body.material) .bento-tokens>div>span {
  font-family:monospace;
  background:var(--t);
  color:var(--c);
  padding:8px 11px;
  font-size:13px;
  border-radius:6px
}
:where(body.material) .bento-icons {
  background:var(--kcds-site-material-background-96)
}
:where(body.material) .bento-icons>div {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:20px;
  margin-top:35px
}
:where(body.material) .system-actions {
  display:flex;
  gap:18px;
  justify-content:center;
  margin-top:40px
}
:where(body.material) .people-section {
  padding:95px 5.5vw;
  background:var(--kcds-site-material-background-97);
  color:white
}
:where(body.material) .people-section>h2 {
  font-size:clamp(44px,6vw,80px)
}
:where(body.material) .people-section .eyebrow {
  color:var(--kcds-site-material-color-62)
}
:where(body.material) .principle-row {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:50px;
  margin-top:60px
}
:where(body.material) .principle-row article {
  border-top:1px solid var(--kcds-site-material-border-top-4);
  padding-top:24px
}
:where(body.material) .principle-row article>span {
  font-size:10px;
  letter-spacing:.09em;
  color:var(--kcds-orange-300)
}
:where(body.material) .principle-row h3 {
  font-size:31px;
  margin:24px 0;
  letter-spacing:-.025em
}
:where(body.material) .principle-row p {
  color:var(--kcds-site-material-color-63);
  font-size:16px
}
:where(body.material) .site-footer {
  padding:70px 5.5vw 100px;
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:35px;
  background:var(--kcds-color-surface-canvas)
}
:where(body.material) .site-footer>div {
  display:flex;
  flex-direction:column;
  align-items:start;
  gap:15px
}
:where(body.material) .site-footer>div>span {
  font-size:13px;
  font-weight:700;
  margin-bottom:8px
}
:where(body.material) .site-footer>div>a:not(.wordmark) {
  font-size:14px;
  color:var(--kcds-color-text-secondary)
}
:where(body.material) .site-footer p {
  font-size:14px;
  margin-top:12px
}
:where(body.material) .footer-bottom {
  grid-column:1/-1;
  border-top:1px solid var(--kcds-color-border-subtle);
  padding-top:25px;
  display:flex;
  justify-content:space-between;
  font-size:12px
}
.material {
  font-family:var(--kcds-font-site)
}
:where(body.material) .m-rail {
  position:fixed;
  left:0;
  top:0;
  bottom:0;
  width:92px;
  background:var(--kcds-site-material-background-98);
  display:flex;
  flex-direction:column;
  align-items:center;
  z-index:30;
  padding:18px 0 14px;
  color:var(--kcds-site-material-color-64);
  overflow-y:auto
}
:where(body.material) .m-brand {
  margin-bottom:17px
}
:where(body.material) .m-search {
  display:grid;
  place-items:center;
  width:56px;
  height:53px;
  border:0;
  border-radius:19px;
  background:var(--kcds-site-material-background-99);
  margin-bottom:17px
}
:where(body.material) .m-rail nav {
  display:flex;
  flex-direction:column;
  gap:13px;
  width:100%;
  align-items:center
}
:where(body.material) .m-rail nav a {
  display:flex;
  flex-direction:column;
  align-items:center;
  font-size:10px;
  gap:5px;
  text-align:center;
  width:100%;
  min-height:52px
}
:where(body.material) .m-rail nav a>svg {
  width:55px;
  height:31px;
  padding:4px 15px;
  border-radius:20px
}
:where(body.material) .m-rail nav a[aria-current=page]>svg {
  background:var(--kcds-site-material-background-100)
}
:where(body.material) .rail-bottom {
  margin-top:auto;
  padding-top:22px;
  display:flex;
  flex-direction:column;
  gap:12px
}
:where(body.material) .rail-bottom button {
  display:grid;
  place-items:center;
  border:1px solid var(--kcds-site-material-border-18);
  background:none;
  width:44px;
  height:44px;
  border-radius:50%
}
:where(body.material) .m-main {
  margin-left:92px;
  padding:8px 12px 0
}
:where(body.material) .m-hero {
  border-radius:32px;
  overflow:hidden
}
:where(body.material) .m-hero-copy {
  background:var(--kcds-site-material-background-101);
  padding:48px 48px 45px;
  border-radius:32px;
  margin-bottom:9px
}
:where(body.material) .m-eyebrow {
  font-size:11px;
  font-weight:700;
  letter-spacing:.1em;
  display:block;
  margin-bottom:22px
}
:where(body.material) .m-hero h1 {
  font-size:clamp(70px,7.4vw,114px);
  font-weight:500;
  letter-spacing:-.055em;
  margin-bottom:22px;
  line-height:1.01
}
:where(body.material) .m-hero h1 br {
  display:none
}
:where(body.material) .m-hero-copy>p {
  font-size:21px;
  max-width:900px;
  line-height:1.5;
  margin-bottom:28px;
  color:var(--kcds-site-material-color-65)
}
:where(body.material) .m-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:25px;
  border-radius:100px;
  background:var(--kcds-site-material-background-102);
  color:var(--kcds-gray-0);
  font-size:22px;
  font-weight:700;
  padding:23px 36px;
  transition:background .25s
}
:where(body.material) .m-button:hover {
  background:var(--kcds-site-material-background-103)
}
:where(body.material) .m-hero-art {
  position:relative;
  height:510px;
  background:var(--kcds-orange-50);
  border-radius:28px;
  overflow:hidden
}
:where(body.material) .m-hero-art>img {
  height:100%;
  width:100%;
  object-fit:cover;
  animation:art-breathe 18s ease-in-out infinite;
  object-position:center 52%
}
:where(body.material) .art-stamp {
  position:absolute;
  right:30px;
  top:28px;
  padding:22px 25px;
  background:var(--kcds-site-material-background-104);
  border-radius:50%;
  font-size:20px;
  line-height:1.15;
  transform:rotate(10deg);
  box-shadow:0 5px 15px var(--kcds-site-material-box-shadow-23)
}
:where(body.material) .art-stamp b {
  font-size:24px
}
:where(body.material) .motion-button {
  position:absolute;
  right:24px;
  bottom:22px;
  width:45px;
  height:45px;
  border:0;
  border-radius:50%;
  background:var(--kcds-site-material-background-105);
  display:grid;
  place-items:center
}
@keyframes art-breathe {
50% {
  transform:scale(1.07) rotate(.6deg)
}
}
:where(body.material) .m-section {
  padding:75px 35px 15px
}
:where(body.material) .m-section-title {
  display:flex;
  justify-content:space-between;
  gap:35px;
  align-items:end;
  margin-bottom:35px
}
:where(body.material) .m-section-title h2 {
  font-size:clamp(34px,3.6vw,53px);
  font-weight:500;
  line-height:1.1;
  margin:0;
  letter-spacing:-.045em
}
:where(body.material) .m-section-title p {
  font-size:16px;
  margin:0
}
:where(body.material) .m-product-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px
}
:where(body.material) .m-product {
  display:flex;
  align-items:center;
  gap:13px;
  border:2px solid transparent;
  background:var(--kcds-color-primary-tint);
  color:var(--kcds-color-primary);
  border-radius:24px;
  padding:22px 18px;
  text-align:left;
  transition:border-radius .3s,transform .3s
}
:where(body.material) .m-product[aria-pressed=true] {
  border-color:var(--kcds-color-primary);
  border-radius:24px 24px 8px 8px
}
:where(body.material) .m-product:hover {
  transform:translateY(-4px)
}
:where(body.material) .m-suite-symbol svg {
  width:25px;
  height:25px
}
:where(body.material) .m-product>span:nth-child(2) {
  flex:1
}
:where(body.material) .m-product b {
  display:block;
  font-size:22px;
  font-weight:600;
  letter-spacing:-.02em
}
:where(body.material) .m-product small {
  display:block;
  font-size:10px;
  margin-top:7px
}
:where(body.material) .m-product>svg {
  width:17px
}
:where(body.material) .m-product-detail {
  background:var(--kcds-color-primary-tint);
  border-radius:28px;
  margin-top:12px;
  padding:45px;
  display:grid;
  grid-template-columns:1.15fr 1fr;
  align-items:center;
  transition:background .4s;
  color:var(--kcds-site-material-color-66)
}
:where(body.material) .m-detail-copy>h3 {
  font-size:38px;
  font-weight:500;
  line-height:1.1;
  letter-spacing:-.04em
}
:where(body.material) .m-detail-copy>p {
  font-size:16px;
  color:var(--kcds-site-material-color-67);
  max-width:400px
}
:where(body.material) .m-product-list {
  display:block;
  font-size:12px;
  line-height:1.7;
  max-width:450px;
  margin:25px 0
}
:where(body.material) .m-detail-copy>.pill-link {
  font-size:14px;
  border:0;
  padding:15px 20px;
  background:var(--kcds-site-material-background-106)
}
:where(body.material) .m-demo-card {
  padding:25px;
  background:var(--kcds-gray-0);
  border-radius:28px;
  box-shadow:0 12px 35px var(--kcds-site-material-box-shadow-24);
  transform:rotate(3deg);
  color:var(--kcds-site-material-color-66);
  max-width:370px;
  width:100%;
  justify-self:center
}
:where(body.material) .m-demo-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:14px;
  font-weight:700;
  border-bottom:1px solid var(--kcds-site-material-border-bottom-2);
  padding-bottom:18px
}
:where(body.material) .demo-avatar {
  border-radius:50%;
  background:var(--kcds-color-primary-tint);
  padding:10px;
  font-size:10px;
  color:var(--kcds-color-primary)
}
:where(body.material) .demo-eyebrow {
  display:block;
  font-size:9px;
  letter-spacing:.09em;
  margin:25px 0 13px;
  color:var(--kcds-site-material-color-68)
}
:where(body.material) .m-demo-card h4 {
  font-size:30px;
  font-weight:500;
  line-height:1.1;
  letter-spacing:-.035em
}
:where(body.material) .m-demo-progress {
  display:flex;
  gap:18px;
  align-items:center;
  margin:25px 0
}
:where(body.material) .progress-ring {
  width:85px;
  height:85px;
  border-radius:50%;
  background:conic-gradient(var(--kcds-color-primary) 60%,var(--kcds-color-primary-tint) 60%);
  display:grid;
  place-items:center
}
:where(body.material) .progress-ring>b {
  width:63px;
  height:63px;
  background:var(--kcds-gray-0);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:25px;
  font-weight:500
}
:where(body.material) .progress-ring small {
  font-size:12px
}
:where(body.material) .m-demo-progress>div:last-child>b {
  font-size:12px;
  display:block
}
:where(body.material) .m-demo-progress>div:last-child>small {
  display:block;
  font-size:10px;
  margin-top:9px;
  color:var(--kcds-site-material-color-69)
}
:where(body.material) .m-demo-card>a {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 18px;
  border-radius:40px;
  background:var(--kcds-color-primary);
  color:var(--kcds-gray-0);
  font-size:13px
}
:where(body.material) .m-demo-card>a>svg {
  width:18px
}
:where(body.material) .m-two-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px
}
:where(body.material) .m-card {
  background:var(--kcds-site-material-background-107);
  border-radius:28px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:border-radius .4s,box-shadow .4s
}
:where(body.material) .m-card:hover {
  border-radius:45px;
  box-shadow:0 7px 20px var(--kcds-site-material-box-shadow-25)
}
:where(body.material) .m-card-art {
  height:260px;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:28px
}
:where(body.material) .m-card-copy {
  position:relative;
  padding:25px 28px 30px;
  flex:1
}
:where(body.material) .m-card-copy h3 {
  font-size:26px;
  font-weight:500;
  margin-bottom:12px;
  letter-spacing:-.03em
}
:where(body.material) .m-card-copy p {
  font-size:15px;
  max-width:85%;
  margin:0
}
:where(body.material) .m-card-copy>svg {
  position:absolute;
  right:25px;
  bottom:25px;
  width:22px
}
:where(body.material) .m-colors .m-card-art {
  background:var(--kcds-site-material-background-108)
}
:where(body.material) .m-color-art {
  display:flex;
  align-items:center;
  padding:30px;
  width:100%;
  justify-content:center
}
:where(body.material) .m-color-art span {
  width:100px;
  height:145px;
  border-radius:90px 90px 20px 20px;
  background:var(--kcds-vermilion-500);
  transform:rotate(-16deg);
  margin:-8px
}
:where(body.material) .m-color-art span:nth-child(2) {
  background:var(--kcds-blue-500);
  transform:rotate(12deg);
  border-radius:50%;
  height:130px
}
:where(body.material) .m-color-art span:nth-child(3) {
  background:var(--kcds-emerald-500);
  transform:rotate(-8deg);
  border-radius:25px
}
:where(body.material) .m-color-art span:nth-child(4) {
  background:var(--kcds-periwinkle-500);
  transform:rotate(15deg);
  border-radius:80px 80px 70px 10px
}
:where(body.material) .m-type .m-card-art {
  background:var(--kcds-site-material-background-109)
}
:where(body.material) .m-type-art {
  display:flex;
  align-items:center;
  gap:25px
}
:where(body.material) .m-type-art>b {
  font:150px/1 Lato,sans-serif;
  letter-spacing:-.08em;
  color:var(--kcds-site-material-color-70)
}
:where(body.material) .m-type-art>span {
  font-size:21px;
  line-height:1.2;
  color:var(--kcds-site-material-color-70)
}
:where(body.material) .m-shape .m-card-art {
  background:var(--kcds-site-material-background-110)
}
:where(body.material) .m-shape-art {
  display:flex;
  align-items:center;
  gap:15px
}
:where(body.material) .m-shape-art span {
  width:90px;
  height:110px;
  border-radius:8px;
  background:var(--kcds-site-material-background-111);
  color:var(--kcds-gray-0);
  display:grid;
  place-items:center;
  font-size:32px
}
:where(body.material) .m-shape-art span:nth-child(2) {
  border-radius:26px;
  background:var(--kcds-site-material-background-112);
  height:130px;
  color:var(--kcds-site-material-color-71)
}
:where(body.material) .m-shape-art span:nth-child(3) {
  border-radius:60px;
  background:var(--kcds-site-material-background-113);
  height:150px
}
:where(body.material) .m-motion .m-card-art {
  background:var(--kcds-site-material-background-114)
}
:where(body.material) .m-motion-art {
  display:flex;
  gap:14px;
  align-items:center;
  position:relative;
  padding-bottom:50px
}
:where(body.material) .m-motion-art i {
  width:65px;
  height:65px;
  border-radius:50%;
  background:var(--kcds-blue-500);
  animation:motion-demo 3.5s ease-in-out infinite
}
:where(body.material) .m-motion-art i:nth-child(2) {
  width:110px;
  border-radius:60px;
  background:var(--kcds-blue-400);
  animation-delay:-1s
}
:where(body.material) .m-motion-art i:nth-child(3) {
  background:var(--kcds-site-material-background-115);
  animation-delay:-2s
}
:where(body.material) .m-motion-art span {
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  text-align:center;
  font-size:16px;
  color:var(--kcds-site-material-color-72)
}
@keyframes motion-demo {
50% {
  transform:translateY(-18px) scale(.85)
}
}
:where(body.material) .m-three-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:15px
}
:where(body.material) .m-three-grid .m-card-art {
  height:260px
}
:where(body.material) .m-three-grid .m-card-copy {
  padding:24px
}
:where(body.material) .m-three-grid .m-card-copy h3 {
  font-size:25px
}
:where(body.material) .m-three-grid .m-card-copy p {
  font-size:14px
}
:where(body.material) .m-actions .m-card-art {
  background:var(--kcds-site-material-background-116)
}
:where(body.material) .m-buttons-art {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:13px;
  transform:rotate(-8deg);
  width:80%
}
:where(body.material) .m-buttons-art>span {
  display:flex;
  justify-content:center;
  gap:15px;
  align-items:center;
  background:var(--kcds-emerald-700);
  color:var(--kcds-gray-0);
  border-radius:50px;
  padding:16px 24px;
  width:100%;
  font-size:16px
}
:where(body.material) .m-buttons-art>span:nth-child(2) {
  color:var(--kcds-emerald-700);
  background:var(--kcds-site-material-background-117)
}
:where(body.material) .m-buttons-art>i {
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  border-radius:50%;
  background:var(--kcds-gray-0);
  color:var(--kcds-emerald-700);
  position:absolute;
  bottom:-22px;
  right:5px;
  box-shadow:0 5px 15px var(--kcds-site-material-box-shadow-26)
}
:where(body.material) .m-feedback .m-card-art {
  background:var(--kcds-site-material-background-118)
}
:where(body.material) .m-feedback-art {
  width:83%;
  display:flex;
  flex-direction:column;
  gap:18px;
  transform:rotate(6deg)
}
:where(body.material) .m-feedback-art>span {
  font-size:13px;
  background:var(--kcds-site-material-background-119);
  border-radius:14px;
  padding:13px;
  display:flex;
  align-items:center;
  gap:10px
}
:where(body.material) .m-feedback-art>div {
  padding:20px;
  background:var(--kcds-site-material-background-120);
  border-radius:20px;
  font-size:12px
}
:where(body.material) .m-feedback-art i {
  display:block;
  height:10px;
  margin:15px 0;
  background:linear-gradient(to right,var(--kcds-site-material-background-121) 65%,var(--kcds-site-material-background-122) 65%);
  border-radius:8px
}
:where(body.material) .m-feedback-art small {
  font-size:9px
}
:where(body.material) .m-selection .m-card-art {
  background:var(--kcds-site-material-background-123)
}
:where(body.material) .m-select-art {
  width:83%;
  background:var(--kcds-site-material-background-124);
  padding:22px;
  border-radius:25px;
  transform:rotate(-4deg)
}
:where(body.material) .m-select-art>span {
  font-size:14px;
  display:block;
  margin-bottom:17px
}
:where(body.material) .m-select-art>div {
  display:flex;
  flex-wrap:wrap;
  gap:8px
}
:where(body.material) .m-select-art b {
  font-size:11px;
  font-weight:500;
  border:1px solid var(--kcds-site-material-border-19);
  border-radius:40px;
  display:flex;
  align-items:center;
  gap:5px;
  padding:10px
}
:where(body.material) .m-select-art b:first-child {
  background:var(--kcds-periwinkle-500);
  color:white;
  border:0
}
:where(body.material) .m-select-art svg {
  width:13px;
  height:13px
}
:where(body.material) .m-ai-banner {
  margin:70px 35px 0;
  background:var(--kcds-site-material-background-125);
  border-radius:32px;
  padding:55px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:center;
  color:var(--kcds-site-material-color-73);
  overflow:hidden
}
:where(body.material) .m-ai-banner h2 {
  font-size:58px;
  font-weight:500;
  letter-spacing:-.05em;
  margin-bottom:25px
}
:where(body.material) .m-ai-banner p {
  font-size:16px;
  color:var(--kcds-site-material-color-74);
  max-width:400px
}
:where(body.material) .m-ai-banner .m-button {
  background:var(--kcds-site-material-background-126);
  font-size:17px;
  padding:18px 26px
}
:where(body.material) .m-ai-art {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  transform:rotate(-5deg)
}
:where(body.material) .m-ai-art>svg {
  width:120px;
  height:120px;
  fill:var(--kcds-site-material-fill-2);
  stroke:var(--kcds-site-material-fill-2);
  margin-bottom:14px
}
:where(body.material) .m-ai-art>div {
  background:var(--kcds-gray-0);
  border-radius:35px;
  padding:23px;
  font-size:17px;
  width:100%;
  text-align:center
}
:where(body.material) .m-ai-art>span {
  border:1px solid var(--kcds-site-material-border-20);
  border-radius:35px;
  padding:12px 20px;
  font-size:14px
}
:where(body.material) .m-ai-art>span:last-child {
  margin-left:80px
}
:where(body.material) .m-next {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
  margin-bottom:60px
}
:where(body.material) .m-next h2 {
  font-size:52px;
  font-weight:500;
  letter-spacing:-.05em
}
:where(body.material) .m-next>div {
  display:flex;
  flex-direction:column;
  gap:10px
}
:where(body.material) .m-next>div>a {
  padding:22px 25px;
  background:var(--kcds-site-material-background-127);
  border-radius:25px;
  display:flex;
  justify-content:space-between;
  font-size:18px
}
.material .site-footer {
  padding:50px 35px 100px;
  border-top:1px solid var(--kcds-color-border-subtle)
}
.material .wordmark {
  font-size:21px
}
.material .pill-link {
  font-family:var(--kcds-font-site)
}
:where(body.material) dialog {
  border:1px solid var(--kcds-color-border-subtle);
  border-radius:22px;
  padding:28px;
  background:var(--kcds-color-surface-canvas);
  color:var(--kcds-color-text-primary);
  width:min(650px,92vw);
  box-shadow:0 30px 100px var(--kcds-site-material-box-shadow-27);
  max-height:85svh
}
:where(body.material) dialog::backdrop {
  background:var(--kcds-site-material-background-128);
  backdrop-filter:blur(6px)
}
:where(body.material) .dialog-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px
}
:where(body.material) .dialog-top h2 {
  font-size:28px;
  margin:0
}
:where(body.material) .dialog-top button {
  display:grid;
  place-items:center;
  background:none;
  border:0;
  padding:8px
}
:where(body.material) .search-field {
  margin-top:25px;
  border:1px solid var(--kcds-color-border-subtle);
  border-radius:12px;
  display:flex;
  align-items:center;
  gap:15px;
  padding:14px
}
:where(body.material) .search-field input {
  border:0;
  background:none;
  font-size:16px;
  color:inherit;
  width:100%;
  outline:none
}
:where(body.material) .search-field:focus-within {
  outline:2px solid var(--kcds-blue-500)
}
:where(body.material) .search-results {
  max-height:43svh;
  overflow:auto;
  margin-top:18px
}
:where(body.material) .search-results a {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-radius:10px;
  padding:14px 10px;
  font-size:16px
}
:where(body.material) .search-results a:hover {
  background:var(--kcds-color-surface-default)
}
:where(body.material) .search-results a svg {
  width:18px
}
:where(body.material) .dialog-hint {
  font-size:12px;
  border-top:1px solid var(--kcds-color-border-subtle);
  padding-top:15px;
  margin-bottom:0
}
:where(body.material) .search-results>p {
  font-size:15px;
  padding:15px
}
:where(body.material) .dialog-top~p {
  font-size:15px
}
:where(body.material) #info-dialog p:first-of-type {
  margin-top:24px
}
:where(body.material) #info-dialog p a {
  text-decoration:underline
}
:where(body.material) .dark .hero-dots {
  background-image:radial-gradient(var(--kcds-site-material-background-image-4) 1.5px,transparent 1.5px)
}
:where(body.material) .dark .m-rail {
  background:var(--kcds-site-material-background-129);
  color:var(--kcds-site-material-color-75)
}
:where(body.material) .dark .m-rail nav a[aria-current=page]>svg {
  background:var(--kcds-site-material-background-130)
}
:where(body.material) .dark .m-search {
  background:var(--kcds-site-material-background-130)
}
:where(body.material) .dark .m-hero-copy {
  background:var(--kcds-site-material-background-131)
}
:where(body.material) .dark .m-hero-copy>p {
  color:var(--kcds-site-material-color-76)
}
:where(body.material) .dark .m-card {
  background:var(--kcds-site-material-background-132)
}
:where(body.material) .dark .m-next>div>a {
  background:var(--kcds-site-material-background-132)
}
:where(body.material) .dark .m-section-title>p {
  color:var(--kcds-site-material-color-77)
}
:where(body.material) .motion-paused * {
  animation-play-state:paused
}
:where(body.material) .motion-paused {
  scroll-behavior:auto
}
@media(min-width:1600px) {
:where(body.material) .m-main {
  max-width:1650px;
  margin-left:auto;
  margin-right:auto;
  padding-left:102px
}
:where(body.material) .m-hero h1 {
  font-size:114px
}
}
@media(max-width:1100px) {
:where(body.material) .wordmark {
  font-size:21px
}
:where(body.material) .product-cards {
  grid-template-columns:repeat(2,1fr)
}
:where(body.material) .product-art {
  height:285px
}
:where(body.material) .product-card-copy p {
  font-size:13px
}
:where(body.material) .learning-tile {
  max-width:255px
}
:where(body.material) .people-stack {
  left:50%;
  transform:translateX(-50%)
}
:where(body.material) .growth-bars {
  max-width:220px
}
:where(body.material) .growth-caption {
  left:30px
}
:where(body.material) .interface-stage {
  right:-180px;
  top:350px;
  width:790px
}
:where(body.material) .language-scene {
  min-height:930px
}
:where(body.material) .ai-section {
  gap:25px
}
:where(body.material) .ai-card {
  width:310px;
  padding:22px
}
:where(body.material) .ai-orbit {
  width:400px;
  border-width:32px
}
:where(body.material) .bento-main h3 {
  font-size:46px
}
:where(body.material) .bento {
  gap:14px
}
:where(body.material) .m-section {
  padding-left:20px;
  padding-right:20px
}
:where(body.material) .m-product {
  padding:20px 12px;
  gap:9px
}
:where(body.material) .m-product small {
  display:none
}
:where(body.material) .m-product b {
  font-size:19px
}
:where(body.material) .m-product-detail {
  padding:30px;
  gap:25px
}
:where(body.material) .m-detail-copy h3 {
  font-size:30px
}
:where(body.material) .m-three-grid {
  gap:10px
}
:where(body.material) .m-type-art>b {
  font-size:120px
}
:where(body.material) .m-type-art>span {
  font-size:17px
}
:where(body.material) .m-shape-art {
  gap:8px
}
:where(body.material) .m-shape-art span {
  width:70px
}
:where(body.material) .m-ai-banner {
  margin-inline:20px;
  padding:35px
}
:where(body.material) .m-next {
  gap:25px
}
:where(body.material) .site-footer .wordmark {
  font-size:20px
}
}
@media(max-width:760px) {
:where(body.material) h2 {
  font-size:43px
}
:where(body.material) .wordmark {
  font-size:20px
}
:where(body.material) .wordmark img {
  width:30px;
  height:30px
}
:where(body.material) .section-dots {
  display:none
}
:where(body.material) .cursor-tag {
  font-size:13px;
  padding:6px 13px
}
:where(body.material) .cursor-learn {
  top:12%;
  left:9%
}
:where(body.material) .cursor-hire {
  top:20%;
  left:72%
}
:where(body.material) .cursor-grow {
  bottom:27%;
  left:66%
}
:where(body.material) .hero-baseline {
  align-items:start;
  gap:25px
}
:where(body.material) .hero-baseline p {
  font-size:13px
}
:where(body.material) .hero-baseline>a {
  font-size:12px;
  gap:7px;
  max-width:125px
}
:where(body.material) .stories {
  padding:35px 5vw 50px
}
:where(body.material) .feature-story {
  grid-template-columns:1fr;
  border-radius:30px;
  gap:7px
}
:where(body.material) .feature-art {
  border-radius:24px;
  height:330px
}
:where(body.material) .feature-art>span {
  font-size:11px;
  left:16px;
  bottom:16px;
  border-radius:10px
}
:where(body.material) .feature-copy {
  border-radius:23px;
  padding:28px
}
:where(body.material) .feature-copy h2 {
  font-size:41px;
  margin:20px 0
}
:where(body.material) .feature-copy h2 br {
  display:none
}
:where(body.material) .feature-copy p {
  font-size:16px
}
:where(body.material) .feature-link {
  padding-top:10px
}
:where(body.material) .product-cards {
  gap:16px
}
:where(body.material) .product-art {
  height:230px;
  border-radius:24px
}
:where(body.material) .product-card-copy h3 {
  font-size:18px
}
:where(body.material) .product-card-copy p {
  font-size:11px
}
:where(body.material) .learning-tile {
  padding:18px 14px
}
:where(body.material) .learning-tile b {
  font-size:21px
}
:where(body.material) .learning-tile>span {
  font-size:8px
}
:where(body.material) .learning-tile>small {
  font-size:8px
}
:where(body.material) .safety-seal {
  width:92px;
  height:92px
}
:where(body.material) .safety-seal svg {
  width:52px;
  height:52px;
  margin:20px
}
:where(body.material) .safety-label {
  font-size:18px;
  margin-top:145px
}
:where(body.material) .growth-caption {
  font-size:22px;
  left:18px
}
:where(body.material) .growth-bars {
  width:75%;
  gap:7px;
  height:125px;
  margin-top:45px
}
:where(body.material) .people-stack span {
  width:60px;
  height:60px;
  font-size:19px;
  border-width:3px
}
:where(body.material) .welcome-label {
  font-size:22px;
  margin-top:115px
}
:where(body.material) .pill-link {
  font-size:15px;
  padding:14px 20px;
  gap:12px
}
:where(body.material) .language-scene {
  padding:60px 6vw 0;
  min-height:850px
}
:where(body.material) .language-copy {
  max-width:95%
}
:where(body.material) .language-copy p {
  font-size:16px
}
:where(body.material) .interface-stage {
  width:650px;
  right:-235px;
  top:395px;
  transform:rotate(-12deg) skew(6deg,2deg)
}
:where(body.material) .dashboard {
  grid-template-columns:115px 1fr
}
:where(body.material) .dash-side {
  padding:20px 12px
}
:where(body.material) .dash-body {
  padding:18px
}
:where(body.material) .dash-greeting h3 {
  font-size:24px
}
:where(body.material) .dash-stats>div {
  padding:10px
}
:where(body.material) .dash-stats b {
  font-size:25px
}
:where(body.material) .dash-course>div:last-child {
  padding:15px
}
:where(body.material) .course-cover {
  font-size:18px
}
:where(body.material) .fl-color {
  left:180px
}
:where(body.material) .fl-type {
  left:-12px
}
:where(body.material) .ai-section {
  grid-template-columns:1fr;
  padding:60px 6vw;
  gap:30px
}
:where(body.material) .ai-composition {
  min-height:390px
}
:where(body.material) .ai-card {
  width:min(330px,90%)
}
:where(body.material) .ai-orbit {
  width:440px
}
:where(body.material) .ai-section h2 {
  font-size:49px
}
:where(body.material) .ai-copy p {
  font-size:16px
}
:where(body.material) .system-section {
  padding:60px 5vw
}
:where(body.material) .system-section>h2 {
  font-size:41px;
  margin-bottom:30px
}
:where(body.material) .bento {
  grid-template-columns:1fr 1fr;
  grid-template-rows:290px 230px 230px 225px;
  gap:12px
}
:where(body.material) .bento>a {
  padding:20px;
  border-radius:22px
}
:where(body.material) .bento-main {
  grid-column:1/-1;
  grid-row:auto
}
:where(body.material) .bento-logo {
  position:absolute;
  right:50px;
  bottom:50px
}
:where(body.material) .bento-logo img {
  width:95px
}
:where(body.material) .bento h3 {
  font-size:21px
}
:where(body.material) .bento-main h3 {
  font-size:55px
}
:where(body.material) .bento-tokens {
  grid-column:auto
}
:where(body.material) .bento-tokens>div {
  gap:5px;
  margin-top:20px
}
:where(body.material) .bento-tokens>div>span {
  font-size:9px;
  padding:6px 7px
}
:where(body.material) .color-bars {
  gap:5px;
  height:100px
}
:where(body.material) .color-labels {
  font-size:7px
}
:where(body.material) .bento-type strong {
  font-size:95px
}
:where(body.material) .ai-mini {
  gap:10px;
  margin-top:25px;
  flex-wrap:wrap
}
:where(body.material) .ai-mini svg {
  width:40px;
  height:40px
}
:where(body.material) .ai-mini span {
  font-size:16px
}
:where(body.material) .focus-demo {
  padding:10px 12px;
  font-size:13px
}
:where(body.material) .bento-access>span:not(.tile-arrow) {
  font-size:10px
}
:where(body.material) .bento-icons>div {
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-top:25px
}
:where(body.material) .bento-icons>div>svg {
  width:19px;
  height:19px
}
:where(body.material) .system-actions {
  gap:10px;
  flex-wrap:wrap
}
:where(body.material) .system-actions .pill-link {
  font-size:13px;
  padding:13px 16px
}
:where(body.material) .people-section {
  padding:60px 6vw
}
:where(body.material) .people-section h2 {
  font-size:46px
}
:where(body.material) .principle-row {
  grid-template-columns:1fr;
  gap:25px;
  margin-top:35px
}
:where(body.material) .principle-row h3 {
  font-size:28px;
  margin:18px 0
}
:where(body.material) .site-footer {
  padding:50px 6vw 100px;
  grid-template-columns:1fr 1fr;
  gap:30px
}
:where(body.material) .site-footer>div:first-child {
  grid-column:1/-1
}
:where(body.material) .footer-bottom {
  flex-direction:column;
  gap:10px
}
:where(body.material) .m-rail {
  width:72px;
  padding:14px 0
}
:where(body.material) .m-brand img {
  width:30px
}
:where(body.material) .m-search {
  width:47px;
  height:46px;
  margin-bottom:14px
}
:where(body.material) .m-rail nav {
  gap:11px
}
:where(body.material) .m-rail nav a {
  font-size:8px;
  min-height:44px
}
:where(body.material) .m-rail nav a>svg {
  width:47px;
  height:28px;
  padding:4px 13px
}
:where(body.material) .rail-bottom button {
  width:38px;
  height:38px
}
:where(body.material) .m-main {
  margin-left:72px;
  padding:8px 8px 0
}
:where(body.material) .m-hero-copy {
  padding:30px 24px;
  border-radius:26px
}
:where(body.material) .m-hero h1 {
  font-size:clamp(44px,8vw,68px);
  letter-spacing:-.06em;
  margin-bottom:23px;
  overflow-wrap:normal
}
:where(body.material) .m-hero h1 br {
  display:block
}
:where(body.material) .m-eyebrow {
  font-size:9px;
  margin-bottom:20px;
  line-height:1.4
}
:where(body.material) .m-hero-copy>p {
  font-size:16px
}
:where(body.material) .m-hero-copy>p br {
  display:none
}
:where(body.material) .m-button {
  font-size:16px;
  padding:17px 24px;
  gap:18px
}
:where(body.material) .m-hero-art {
  height:360px;
  border-radius:24px
}
:where(body.material) .m-hero-art img {
  object-position:50% 50%
}
:where(body.material) .art-stamp {
  font-size:14px;
  padding:18px;
  right:16px;
  top:18px
}
:where(body.material) .art-stamp b {
  font-size:17px
}
:where(body.material) .motion-button {
  width:38px;
  height:38px;
  right:15px;
  bottom:15px
}
:where(body.material) .m-section {
  padding:45px 12px 0
}
:where(body.material) .m-section-title {
  display:block;
  margin-bottom:25px
}
:where(body.material) .m-section-title h2 {
  font-size:33px
}
:where(body.material) .m-section-title p {
  font-size:14px;
  margin-top:18px
}
:where(body.material) .m-section-title>.pill-link {
  margin-top:20px;
  font-size:12px
}
:where(body.material) .m-product-grid {
  grid-template-columns:1fr 1fr;
  gap:7px
}
:where(body.material) .m-product {
  padding:18px 12px;
  gap:7px;
  border-radius:19px
}
:where(body.material) .m-product b {
  font-size:17px
}
:where(body.material) .m-suite-symbol svg {
  width:20px;
  height:20px
}
:where(body.material) .m-product>svg {
  display:none
}
:where(body.material) .m-product-detail {
  grid-template-columns:1fr;
  padding:28px 22px;
  gap:25px;
  border-radius:23px
}
:where(body.material) .m-detail-copy h3 {
  font-size:29px
}
:where(body.material) .m-detail-copy p {
  font-size:15px
}
:where(body.material) .m-detail-copy .pill-link {
  font-size:12px;
  padding:13px
}
:where(body.material) .m-product-list {
  font-size:11px;
  margin:20px 0
}
:where(body.material) .m-demo-card {
  padding:20px;
  transform:rotate(2deg)
}
:where(body.material) .m-demo-card h4 {
  font-size:26px
}
:where(body.material) .m-demo-progress {
  gap:12px
}
:where(body.material) .progress-ring {
  width:65px;
  height:65px;
  flex-shrink:0
}
:where(body.material) .progress-ring>b {
  width:49px;
  height:49px;
  font-size:22px
}
:where(body.material) .m-demo-progress>div:last-child>b {
  font-size:11px
}
:where(body.material) .m-demo-progress>div:last-child>small {
  font-size:9px
}
:where(body.material) .m-demo-card>a {
  font-size:11px;
  padding:13px
}
:where(body.material) .m-two-grid,
:where(body.material) .m-three-grid {
  grid-template-columns:1fr;
  gap:16px
}
:where(body.material) .m-card-art,
:where(body.material) .m-three-grid .m-card-art {
  height:235px
}
:where(body.material) .m-card-copy {
  padding:23px
}
:where(body.material) .m-card-copy h3 {
  font-size:25px
}
:where(body.material) .m-card-copy p {
  font-size:14px
}
:where(body.material) .m-color-art {
  padding:20px
}
:where(body.material) .m-color-art span {
  width:70px;
  height:110px
}
:where(body.material) .m-color-art span:nth-child(2) {
  height:95px
}
:where(body.material) .m-type-art>b {
  font-size:110px
}
:where(body.material) .m-type-art>span {
  font-size:16px
}
:where(body.material) .m-shape-art span {
  width:65px
}
:where(body.material) .m-motion-art {
  gap:9px
}
:where(body.material) .m-motion-art i {
  width:48px;
  height:55px
}
:where(body.material) .m-motion-art i:nth-child(2) {
  width:85px
}
:where(body.material) .m-motion-art span {
  font-size:13px
}
:where(body.material) .m-ai-banner {
  margin:45px 12px 0;
  padding:30px 24px;
  grid-template-columns:1fr;
  gap:30px;
  border-radius:25px
}
:where(body.material) .m-ai-banner h2 {
  font-size:38px
}
:where(body.material) .m-ai-banner p {
  font-size:15px
}
:where(body.material) .m-ai-banner .m-button {
  font-size:14px;
  padding:16px
}
:where(body.material) .m-ai-art>svg {
  width:85px;
  height:85px
}
:where(body.material) .m-ai-art>div {
  font-size:13px;
  padding:20px 12px
}
:where(body.material) .m-ai-art>span {
  font-size:12px
}
:where(body.material) .m-next {
  grid-template-columns:1fr;
  gap:10px;
  margin-bottom:40px
}
:where(body.material) .m-next h2 {
  font-size:37px
}
:where(body.material) .m-next>div>a {
  font-size:14px;
  padding:20px
}
.material .site-footer {
  padding:35px 12px 100px;
  grid-template-columns:1fr;
  gap:30px
}
.material .site-footer>div:first-child {
  grid-column:auto
}
.material .wordmark {
  font-size:15px;
  white-space:normal
}
.material .wordmark img {
  width:28px
}
.material .site-footer p {
  font-size:12px
}
.material .site-footer>div>a:not(.wordmark) {
  font-size:12px
}
:where(body.material) dialog {
  padding:22px
}
:where(body.material) .dialog-top h2 {
  font-size:24px
}
:where(body.material) .search-field input {
  font-size:14px
}
}
@media(prefers-reduced-motion:reduce) {
:where(body.material) *,
:where(body.material) *:before,
:where(body.material) *:after {
  animation:none!important;
  transition:none!important
}
html:has(body.material) {
  scroll-behavior:auto
}
}
:where(body.material) .wordmark .official-wordmark {
  width:165px;
  height:auto;
  max-width:none
}
:where(body.material) .wordmark .design-word {
  font-weight:400;
  font-size:24px;
  letter-spacing:-.045em
}
:where(body.material) .dark .official-wordmark {
  filter:brightness(0) invert(1)
}
:where(body.material) .wordmark {
  gap:7px
}
:where(body.material) .generated-art>img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .65s cubic-bezier(.2,.7,.2,1)
}
:where(body.material) .product-card:hover .generated-art>img {
  transform:scale(1.07)
}
:where(body.material) .art-open {
  position:absolute;
  right:17px;
  bottom:17px;
  width:35px;
  height:35px;
  display:grid;
  place-items:center;
  background:var(--kcds-site-material-background-133);
  backdrop-filter:blur(8px);
  border-radius:50%;
  color:var(--kcds-site-material-background-77)
}
:where(body.material) .art-open svg {
  width:19px;
  height:19px
}
:where(body.material) .m-suite-scene {
  position:relative;
  min-height:440px;
  display:grid;
  place-items:end center;
  isolation:isolate
}
:where(body.material) .m-suite-scene>img {
  position:absolute;
  top:-18px;
  right:-15px;
  width:100%;
  height:285px;
  object-fit:cover;
  border-radius:24px;
  z-index:-1;
  transition:opacity .2s,transform .5s
}
:where(body.material) .m-suite-scene .m-demo-card {
  width:83%;
  margin-top:120px;
  background:var(--kcds-site-material-background-134);
  backdrop-filter:blur(15px);
  transform:rotate(3deg) translateX(-20px)
}
:where(body.material) .m-suite-scene .m-demo-card h4 {
  font-size:25px
}
:where(body.material) .m-suite-scene .m-demo-progress {
  margin:18px 0
}
:where(body.material) .m-product-detail {
  gap:35px
}
:where(body.material) .m-product-detail.art-changing .m-suite-scene>img {
  opacity:.3;
  transform:scale(.96)
}
:where(body.material) .reveal-item {
  opacity:1;
  transform:none
}
:where(body.material) .motion-ready .reveal-item:not(.is-visible) {
  opacity:0;
  transform:translateY(25px)
}
:where(body.material) .motion-ready .reveal-item {
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)
}
:where(body.material) .motion-paused .reveal-item {
  opacity:1;
  transform:none
}
:where(body.material) .live-studio {
  padding:95px 5.5vw;
  background:var(--kcds-color-surface-default);
  position:relative
}
:where(body.material) .studio-heading {
  text-align:center
}
:where(body.material) .studio-heading h2 {
  font-size:72px;
  letter-spacing:-.06em;
  margin-bottom:18px
}
:where(body.material) .studio-heading>p {
  font-size:18px
}
:where(body.material) .studio-heading .eyebrow {
  color:var(--kcds-color-text-secondary);
  font-size:11px
}
:where(body.material) .studio-shell {
  max-width:990px;
  margin:42px auto 0;
  display:grid;
  grid-template-columns:340px 1fr;
  background:var(--kcds-color-surface-canvas);
  border:1px solid var(--kcds-color-border-subtle);
  border-radius:28px;
  overflow:hidden
}
:where(body.material) .studio-controls {
  padding:33px;
  border-right:1px solid var(--kcds-color-border-subtle)
}
:where(body.material) .studio-controls h3 {
  font-size:22px;
  margin-bottom:30px
}
:where(body.material) .studio-controls fieldset {
  border:0;
  padding:0;
  margin:0 0 25px
}
:where(body.material) .studio-controls legend {
  font-size:12px;
  font-weight:700;
  margin-bottom:11px;
  color:var(--kcds-color-text-secondary)
}
:where(body.material) .studio-suites {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px
}
:where(body.material) .studio-suites button {
  display:flex;
  align-items:center;
  gap:8px;
  background:var(--kcds-color-surface-canvas);
  border:1px solid var(--kcds-color-border-subtle);
  border-radius:10px;
  padding:11px 10px;
  font-size:13px
}
:where(body.material) .studio-suites button>i {
  width:9px;
  height:9px;
  background:var(--swatch);
  border-radius:50%
}
:where(body.material) .studio-suites button[aria-pressed=true] {
  border-color:var(--swatch);
  box-shadow:inset 0 0 0 1px var(--swatch)
}
:where(body.material) .studio-segment {
  display:flex;
  padding:4px;
  background:var(--kcds-color-surface-default);
  border-radius:10px;
  gap:4px
}
:where(body.material) .studio-segment button {
  border:0;
  background:none;
  padding:10px 7px;
  flex:1;
  border-radius:7px;
  font-size:12px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:7px
}
:where(body.material) .studio-segment button svg {
  width:16px;
  height:16px
}
:where(body.material) .studio-segment button[aria-pressed=true] {
  background:var(--kcds-color-surface-canvas);
  box-shadow:0 1px 5px var(--kcds-site-material-box-shadow-28)
}
:where(body.material) .studio-range {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:15px;
  font-size:12px;
  color:var(--kcds-color-text-secondary)
}
:where(body.material) .studio-range output {
  font-variant-numeric:tabular-nums
}
:where(body.material) .studio-range input {
  width:100%;
  accent-color:var(--kcds-vermilion-500);
  cursor:pointer
}
:where(body.material) .replay-motion {
  display:flex;
  gap:9px;
  align-items:center;
  justify-content:center;
  width:100%;
  padding:11px;
  border:1px solid var(--kcds-color-border-subtle);
  border-radius:10px;
  background:var(--kcds-color-surface-canvas);
  font-size:12px;
  margin-top:18px
}
:where(body.material) .replay-motion svg {
  width:15px;
  height:15px
}
:where(body.material) .studio-canvas {
  background:radial-gradient(var(--kcds-site-material-background-135) 1px,transparent 1px),var(--kcds-site-material-background-136);
  background-size:18px 18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  padding:24px 28px;
  color:var(--kcds-site-material-color-78);
  transition:background-color var(--duration),color var(--duration)
}
:where(body.material) .studio-canvas-top {
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:9px;
  letter-spacing:.06em;
  color:var(--kcds-site-material-color-79);
  gap:15px
}
:where(body.material) .studio-canvas-top>span:last-child {
  color:var(--lab-accent);
  font-size:12px;
  font-weight:700;
  letter-spacing:0
}
:where(body.material) .studio-example {
  background:var(--kcds-gray-0);
  border:1px solid var(--kcds-site-material-border-21);
  box-shadow:0 15px 35px var(--kcds-site-material-box-shadow-29);
  border-radius:23px;
  width:100%;
  max-width:325px;
  padding:27px;
  margin:30px 0;
  transition:padding var(--duration),border-radius var(--duration),background-color var(--duration),transform var(--duration)
}
:where(body.material) .studio-example-icon {
  width:48px;
  height:48px;
  background:var(--lab-tint);
  color:var(--lab-accent);
  display:grid;
  place-items:center;
  border-radius:15px;
  transition:background-color var(--duration)
}
:where(body.material) .studio-kicker {
  display:block;
  font-size:9px;
  letter-spacing:.07em;
  margin:21px 0 12px;
  color:var(--kcds-site-material-color-80)
}
:where(body.material) .studio-example h3 {
  font-size:31px;
  letter-spacing:-.04em;
  margin-bottom:15px;
  line-height:1.06
}
:where(body.material) .studio-example p {
  font-size:13px;
  color:var(--kcds-site-material-color-81);
  margin-bottom:24px
}
:where(body.material) .lab-progress {
  height:7px;
  background:var(--kcds-site-material-background-137);
  border-radius:6px;
  overflow:hidden
}
:where(body.material) .lab-progress>span {
  width:60%;
  height:100%;
  display:block;
  background:var(--lab-accent);
  border-radius:6px;
  transition:width var(--duration),background-color var(--duration)
}
:where(body.material) .lab-meta {
  display:flex;
  justify-content:space-between;
  font-size:10px;
  color:var(--kcds-site-material-color-82);
  margin-top:9px
}
:where(body.material) .lab-action {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  background:var(--lab-accent);
  color:white;
  padding:17px 20px;
  border:0;
  border-radius:14px;
  width:100%;
  margin-top:24px;
  font-size:14px;
  font-weight:700;
  transition:padding var(--duration),border-radius var(--duration),background-color var(--duration)
}
:where(body.material) .lab-action svg {
  width:18px;
  height:18px
}
:where(body.material) .lab-success {
  font-size:11px;
  color:var(--kcds-emerald-600);
  line-height:1.5;
  min-height:0
}
:where(body.material) .lab-success:not(:empty) {
  margin-top:14px
}
:where(body.material) .studio-token {
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  border-top:1px solid var(--kcds-site-material-border-top-5);
  padding-top:17px
}
:where(body.material) .studio-token small {
  display:block;
  font-size:8px;
  letter-spacing:.1em;
  color:var(--kcds-site-material-color-80)
}
:where(body.material) .studio-token code {
  display:block;
  font-size:13px;
  margin-top:7px
}
:where(body.material) .studio-token button {
  display:flex;
  gap:8px;
  align-items:center;
  background:transparent;
  border:0;
  font-size:11px
}
:where(body.material) .studio-token button svg {
  width:15px;
  height:15px
}
:where(body.material) .studio-canvas.is-dark {
  background-color:var(--kcds-site-material-background-color-2);
  background-image:radial-gradient(var(--kcds-site-material-background-image-5) 1px,transparent 1px);
  color:var(--kcds-site-material-color-83)
}
:where(body.material) .is-dark .studio-example {
  background:var(--kcds-site-material-background-138);
  border-color:var(--kcds-site-material-border-color-6);
  box-shadow:0 15px 35px var(--kcds-site-material-box-shadow-30)
}
:where(body.material) .is-dark .studio-example p,
:where(body.material) .is-dark .studio-kicker,
:where(body.material) .is-dark .lab-meta {
  color:var(--kcds-site-material-color-84)
}
:where(body.material) .is-dark .lab-progress {
  background:var(--kcds-site-material-background-139)
}
:where(body.material) .is-dark .lab-success {
  color:var(--kcds-site-material-color-85)
}
:where(body.material) .is-dark .studio-token {
  border-color:var(--kcds-site-material-border-color-6)
}
:where(body.material) .is-dark .studio-canvas-top>span:last-child {
  color:var(--kcds-site-material-color-86)
}
:where(body.material) .studio-canvas.is-compact .studio-example {
  padding:20px;
  border-radius:12px
}
:where(body.material) .studio-canvas.is-compact .lab-action {
  padding:10px 14px;
  border-radius:8px;
  font-size:12px
}
:where(body.material) .studio-canvas.is-compact .studio-kicker {
  margin-top:15px
}
:where(body.material) .studio-canvas.is-compact .studio-example h3 {
  font-size:27px
}
:where(body.material) .studio-canvas.is-replaying .studio-example {
  transform:translateY(-16px) scale(.98)
}
:where(body.material) .company-story {
  padding:85px 5.5vw;
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:9vw;
  align-items:center
}
:where(body.material) .company-story h2 {
  font-size:57px
}
:where(body.material) .company-story p {
  font-size:17px;
  max-width:540px
}
:where(body.material) .company-story>div>a {
  display:flex;
  gap:10px;
  align-items:center;
  font-size:15px;
  font-weight:700;
  margin-top:25px
}
:where(body.material) .company-story a svg {
  width:18px
}
:where(body.material) .company-facts {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:25px
}
:where(body.material) .company-facts article {
  border-top:1px solid var(--kcds-color-border-subtle);
  padding-top:22px;
  display:flex;
  flex-direction:column;
  gap:12px
}
:where(body.material) .company-facts article>b {
  font-size:52px;
  line-height:1;
  letter-spacing:-.05em;
  font-weight:400
}
:where(body.material) .company-facts article>span {
  font-size:13px;
  color:var(--kcds-color-text-secondary)
}
:where(body.material) .company-facts article:nth-child(3) {
  grid-column:1/-1
}
:where(body.material) .company-facts small {
  grid-column:1/-1;
  font-size:10px;
  color:var(--kcds-color-text-secondary);
  line-height:1.5
}
.material .live-studio {
  margin:70px 35px 0;
  border-radius:32px;
  padding:45px 30px;
  background:var(--kcds-site-material-background-140)
}
.material.dark .live-studio {
  background:var(--kcds-site-material-background-141)
}
.material .studio-heading h2 {
  font-weight:500;
  font-size:64px
}
.material .studio-shell {
  grid-template-columns:290px 1fr;
  border:0;
  border-radius:26px
}
.material .studio-controls {
  padding:25px
}
.material .studio-canvas {
  padding:22px
}
.material .studio-example {
  border-radius:30px
}
.material .studio-suites button {
  border-radius:24px
}
.material .studio-segment {
  border-radius:25px
}
.material .studio-segment button {
  border-radius:20px
}
.material .replay-motion {
  border-radius:24px
}
.material .company-story {
  padding:75px 35px 25px;
  gap:45px
}
.material .company-story h2 {
  font-weight:500;
  font-size:49px
}
.material .company-facts article>b {
  font-size:47px
}
@media(max-width:1100px) {
.material .studio-shell {
  grid-template-columns:250px 1fr
}
.material .studio-controls {
  padding:22px
}
.material .live-studio {
  margin-inline:20px;
  padding:40px 20px
}
:where(body.material) .company-story {
  gap:40px
}
:where(body.material) .company-story h2 {
  font-size:48px
}
:where(body.material) .m-suite-scene .m-demo-card {
  width:92%;
  transform:rotate(3deg) translateX(-5px)
}
}
@media(max-width:760px) {
:where(body.material) .wordmark .official-wordmark {
  width:145px;
  height:auto
}
:where(body.material) .wordmark .design-word {
  font-size:21px
}
:where(body.material) .product-art.generated-art {
  height:230px
}
:where(body.material) .m-suite-scene {
  min-height:460px
}
:where(body.material) .m-suite-scene>img {
  right:0;
  top:0
}
:where(body.material) .m-suite-scene .m-demo-card {
  width:90%;
  margin-top:150px;
  padding:20px
}
:where(body.material) .live-studio {
  padding:55px 5vw
}
:where(body.material) .studio-heading h2 {
  font-size:48px
}
:where(body.material) .studio-heading p {
  font-size:15px
}
:where(body.material) .studio-heading .eyebrow {
  font-size:9px
}
:where(body.material) .studio-shell,
.material .studio-shell {
  grid-template-columns:1fr;
  margin-top:28px
}
:where(body.material) .studio-controls {
  padding:25px;
  border-right:0;
  border-bottom:1px solid var(--kcds-color-border-subtle)
}
:where(body.material) .studio-controls h3 {
  font-size:22px;
  margin-bottom:22px
}
:where(body.material) .studio-suites {
  grid-template-columns:repeat(4,1fr);
  gap:5px
}
:where(body.material) .studio-suites button {
  padding:10px 5px;
  font-size:11px;
  gap:5px;
  justify-content:center
}
:where(body.material) .studio-suites button>i {
  width:7px;
  height:7px
}
:where(body.material) .studio-controls fieldset {
  margin-bottom:19px
}
:where(body.material) .studio-canvas {
  padding:23px
}
:where(body.material) .studio-example {
  margin:25px 0;
  padding:25px
}
:where(body.material) .company-story,
.material .company-story {
  grid-template-columns:1fr;
  padding:55px 6vw;
  gap:35px
}
:where(body.material) .company-story h2,
.material .company-story h2 {
  font-size:42px
}
:where(body.material) .company-story p {
  font-size:16px
}
:where(body.material) .company-facts {
  gap:22px
}
:where(body.material) .company-facts article>b {
  font-size:47px
}
:where(body.material) .company-facts article>span {
  font-size:12px
}
.material .live-studio {
  margin:45px 12px 0;
  padding:32px 14px;
  border-radius:25px
}
.material .studio-heading h2 {
  font-size:42px
}
.material .studio-heading .eyebrow {
  font-size:8px
}
.material .studio-heading p {
  font-size:13px
}
.material .studio-heading p br {
  display:none
}
.material .studio-controls {
  padding:21px
}
.material .studio-suites {
  grid-template-columns:1fr 1fr;
  gap:8px
}
.material .studio-suites button {
  padding:11px
}
.material .studio-canvas {
  padding:17px
}
.material .studio-example {
  padding:23px
}
.material .studio-token {
  gap:10px
}
.material .studio-token button {
  font-size:10px
}
.material .company-story {
  padding:50px 18px 15px
}
.material .company-story h2 {
  font-size:35px
}
.material .company-facts article>b {
  font-size:38px
}
.material .site-footer .official-wordmark {
  width:130px
}
.material .site-footer .design-word {
  font-size:16px
}
}
@media(prefers-reduced-motion:reduce) {
:where(body.material) .motion-ready .reveal-item {
  opacity:1!important;
  transform:none!important
}
:where(body.material) .studio-canvas.is-replaying .studio-example {
  transform:none
}
}
body {
  margin:0;
  background:var(--kcds-color-surface-canvas);
  color:var(--kcds-color-text-primary);
  font-family:var(--kcds-font-site)
}
* {
  box-sizing:border-box
}
[hidden] {
  display:none!important
}
a {
  color:inherit
}
button,
input,
select {
  font:inherit
}
button {
  cursor:pointer
}
svg {
  width:20px;
  height:20px;
  flex-shrink:0
}
html {
  scroll-padding-top:100px
}
.ds-skip {
  position:fixed;
  top:-60px;
  left:20px;
  z-index:300;
  padding:12px;
  background:white
}
.ds-skip:focus {
  top:10px
}
:focus-visible {
  outline:3px solid var(--kcds-blue-500);
  outline-offset:4px
}
.ds-header {
  height:74px;
  position:sticky;
  top:0;
  background:var(--kcds-color-surface-canvas);
  border-bottom:1px solid var(--kcds-color-border-subtle);
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  padding:0 30px
}
.ds-brand {
  display:flex;
  align-items:center;
  gap:9px;
  text-decoration:none;
  font-size:24px;
  letter-spacing:-.04em
}
.ds-brand img {
  width:165px;
  height:auto
}
.ds-header nav {
  display:flex;
  gap:25px;
  align-items:center;
  font-size:14px
}
.ds-header nav a {
  display:flex;
  align-items:center;
  gap:5px;
  text-decoration:none
}
.ds-header nav button {
  display:grid;
  place-items:center;
  padding:9px;
  border:1px solid var(--kcds-color-border-subtle);
  border-radius:8px;
  background:none;
  color:inherit
}
.ds-header .ds-current {
  font-weight:700
}
.ds-menu-toggle {
  display:none
}
.ds-shell {
  display:grid;
  grid-template-columns:256px minmax(0,1fr)
}
.ds-sidebar {
  position:sticky;
  top:74px;
  height:calc(100dvh - 74px);
  overflow:auto;
  border-right:1px solid var(--kcds-color-border-subtle);
  padding:24px 17px;
  scrollbar-width:thin;
  background:var(--kcds-color-surface-canvas)
}
.ds-home {
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 8px 23px;
  text-decoration:none;
  font-size:20px
}
.ds-home img {
  width:27px
}
.ds-home>span {
  font-size:11px;
  margin-left:auto;
  color:var(--kcds-color-text-secondary);
  border:1px solid var(--kcds-color-border-subtle);
  border-radius:5px;
  padding:3px 6px
}
.ds-filter {
  display:flex;
  align-items:center;
  gap:8px;
  background:var(--kcds-color-surface-default);
  padding:11px 10px;
  border:1px solid var(--kcds-color-border-subtle);
  border-radius:10px;
  margin-bottom:18px
}
.ds-filter svg {
  width:16px;
  height:16px;
  color:var(--kcds-color-text-secondary)
}
.ds-filter input {
  min-width:0;
  width:100%;
  border:0;
  background:none;
  color:inherit;
  outline:none;
  font-size:13px
}
.ds-filter:focus-within {
  outline:2px solid var(--kcds-blue-500)
}
.ds-filter kbd {
  color:var(--kcds-color-text-secondary);
  font-size:10px
}
.ds-overview-link {
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  padding:11px 10px;
  font-size:13px;
  border-radius:8px;
  margin-bottom:3px
}
.ds-overview-link svg {
  width:17px;
  height:17px
}
.ds-overview-link>span {
  margin-left:auto;
  color:var(--kcds-color-text-secondary);
  font-size:10px
}
.ds-nav-groups {
  margin-top:18px;
  border-top:1px solid var(--kcds-color-border-subtle);
  padding-top:15px
}
.ds-nav-group {
  margin-bottom:6px
}
.ds-nav-group summary {
  list-style:none;
  display:flex;
  align-items:center;
  gap:9px;
  padding:11px 9px;
  cursor:pointer;
  font-size:13px;
  font-weight:700
}
.ds-nav-group summary::-webkit-details-marker {
  display:none
}
.ds-nav-group summary svg {
  width:16px;
  height:16px;
  color:var(--kcds-color-text-secondary)
}
.ds-nav-group summary small {
  margin-left:auto;
  font-size:10px;
  color:var(--kcds-color-text-secondary);
  font-weight:400
}
.ds-nav-group summary svg:last-child {
  width:13px;
  transition:transform .2s
}
.ds-nav-group[open] summary svg:last-child {
  transform:rotate(180deg)
}
.ds-nav-group>div {
  padding:1px 0 8px 27px
}
.ds-nav-group a {
  display:block;
  padding:9px 13px;
  color:var(--kcds-color-text-secondary);
  text-decoration:none;
  font-size:13px;
  line-height:1.35;
  border-radius:7px
}
.ds-nav-group a:hover,
.ds-overview-link:hover {
  background:var(--kcds-color-surface-default);
  color:var(--kcds-color-text-primary)
}
.ds-sidebar a[aria-current=page] {
  background:var(--kcds-site-ds-sidebar-background-6);
  color:var(--kcds-site-ds-sidebar-color-3);
  font-weight:700
}
.ds-bottom-home {
  display:flex;
  gap:8px;
  align-items:center;
  border-top:1px solid var(--kcds-color-border-subtle);
  padding:20px 8px;
  margin-top:20px;
  font-size:12px;
  text-decoration:none;
  color:var(--kcds-color-text-secondary)
}
.ds-no-results {
  font-size:13px;
  padding:10px
}
.ds-main {
  padding:30px 3.5vw 0;
  min-width:0;
  max-width:1500px;
  width:100%;
  margin:auto
}
.ds-crumb {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
  font-size:11px;
  color:var(--kcds-color-text-secondary);
  margin-bottom:30px;
  min-height:20px
}
.ds-crumb>a {
  text-decoration:none
}
.ds-crumb svg {
  width:12px;
  height:12px
}
.ds-crumb>span {
  font-weight:700
}
.ds-overview-hero {
  display:grid;
  grid-template-columns:1.15fr 1fr;
  min-height:385px;
  border-radius:24px;
  overflow:hidden;
  background:var(--kcds-site-ds-overview-hero-background-2);
  color:var(--kcds-site-ds-overview-hero-color-4)
}
.ds-overview-hero>div {
  padding:38px 32px
}
.ds-eyebrow {
  display:block;
  font-size:10px;
  font-weight:700;
  letter-spacing:.1em;
  margin-bottom:22px;
  color:var(--kcds-color-text-secondary)
}
.ds-overview-hero h1 {
  font:800 clamp(35px,3.7vw,58px)/1.04 Manrope,Lato,sans-serif;
  letter-spacing:-.05em;
  margin:0 0 23px
}
.ds-overview-hero p {
  font-size:16px;
  line-height:1.65;
  color:var(--kcds-site-ds-overview-hero-color-5);
  margin:0;
  max-width:430px
}
.ds-overview-hero>img {
  width:100%;
  height:100%;
  object-fit:cover;
  min-height:385px
}
.ds-hero-actions {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:28px;
  align-items:center
}
.ds-hero-actions a {
  display:flex;
  align-items:center;
  gap:10px;
  padding:13px 17px;
  border:1px solid var(--kcds-site-ds-hero-actions-border-2);
  border-radius:35px;
  font-size:12px;
  text-decoration:none
}
.ds-hero-actions a:first-child {
  background:var(--kcds-site-ds-hero-actions-background-2);
  color:white;
  border-color:var(--kcds-site-ds-hero-actions-background-2)
}
.ds-hero-actions svg {
  width:16px;
  height:16px
}
.ds-intro-strip {
  display:flex;
  justify-content:space-between;
  gap:20px;
  border-bottom:1px solid var(--kcds-color-border-subtle);
  padding:25px 0;
  flex-wrap:wrap
}
.ds-intro-strip span {
  display:flex;
  align-items:center;
  gap:9px;
  color:var(--kcds-color-text-secondary);
  font-size:12px
}
.ds-intro-strip b {
  font-size:22px;
  color:var(--kcds-color-text-primary);
  font-weight:400
}
.ds-heading-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin:48px 0 22px
}
.ds-heading-row h2 {
  font-size:27px;
  letter-spacing:-.035em;
  font-weight:700;
  margin:0
}
.ds-heading-row>a {
  font-size:12px;
  display:flex;
  align-items:center;
  gap:8px;
  text-decoration:none
}
.ds-heading-row svg {
  width:16px
}
.ds-card-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:17px
}
.ds-card {
  border:1px solid var(--kcds-color-border-subtle);
  border-radius:20px;
  overflow:hidden;
  text-decoration:none;
  background:var(--kcds-color-surface-canvas);
  transition:transform .25s
}
.ds-card:hover {
  transform:translateY(-4px)
}
.ds-card-art {
  height:165px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  overflow:hidden
}
.ds-card>div:last-child {
  padding:19px 20px 23px;
  position:relative
}
.ds-card h3 {
  font-size:19px;
  font-weight:700;
  letter-spacing:-.02em;
  margin:0 0 9px
}
.ds-card p {
  font-size:12px;
  color:var(--kcds-color-text-secondary);
  line-height:1.5;
  margin:0;
  max-width:90%
}
.ds-card>div:last-child>svg {
  position:absolute;
  right:17px;
  top:20px;
  width:16px;
  height:16px
}
.ds-card-colors .ds-card-art {
  background:var(--kcds-site-ds-card-colors-background-2);
  padding:28px
}
.ds-card-colors .ds-card-art>span {
  width:40px;
  height:86px;
  transform:rotate(-12deg);
  border-radius:30px
}
.ds-card-colors .ds-card-art>span:nth-child(2n) {
  transform:rotate(12deg);
  height:108px
}
.ds-card-type .ds-card-art {
  background:var(--kcds-site-ds-card-type-background-2)
}
.ds-card-type .ds-card-art>b {
  font-size:95px;
  color:var(--kcds-site-ds-card-type-color-2);
  font-weight:400;
  letter-spacing:-.07em
}
.ds-card-buttons .ds-card-art {
  background:var(--kcds-site-ds-card-buttons-background-2)
}
.example-button {
  background:var(--kcds-emerald-600);
  color:white;
  display:flex;
  gap:15px;
  align-items:center;
  padding:15px 20px;
  border-radius:16px;
  font-size:14px;
  transform:rotate(-8deg)
}
.ds-card-products img {
  width:100%;
  height:100%;
  object-fit:cover
}
.ds-card-ai .ds-card-art {
  background:var(--kcds-site-ds-card-ai-background-2)
}
.ds-card-ai .ds-card-art>svg {
  width:75px;
  height:75px;
  color:var(--kcds-violet-500);
  stroke-width:1.3
}
.ds-card-icons .ds-card-art {
  background:var(--kcds-site-ds-card-icons-background-2);
  display:grid;
  grid-template-columns:repeat(3,30px);
  gap:20px
}
.ds-card-icons .ds-card-art>svg {
  width:27px;
  height:27px;
  color:var(--kcds-site-ds-card-icons-color-2)
}
.ds-guidance {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin:40px 0
}
.ds-guidance>div {
  background:var(--kcds-color-surface-default);
  padding:28px;
  border-radius:20px
}
.ds-guidance h3 {
  font-size:20px;
  margin:20px 0 12px;
  letter-spacing:-.03em
}
.ds-guidance p {
  font-size:14px;
  color:var(--kcds-color-text-secondary);
  line-height:1.6;
  max-width:370px
}
.ds-guidance a {
  display:flex;
  gap:10px;
  align-items:center;
  font-size:13px;
  text-decoration:none;
  margin-top:20px
}
.ds-footer {
  border-top:1px solid var(--kcds-color-border-subtle);
  padding:30px 0 40px;
  margin-top:65px;
  display:flex;
  justify-content:space-between;
  gap:25px;
  font-size:11px;
  color:var(--kcds-color-text-secondary)
}
.ds-footer a {
  display:flex;
  align-items:center;
  gap:8px;
  text-decoration:none
}
.ds-footer svg {
  width:14px
}
.ds-page-context {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:20px;
  font-size:11px;
  color:var(--kcds-color-text-secondary)
}
.ds-page-context>span {
  text-transform:uppercase;
  letter-spacing:.09em
}
.ds-page-context button {
  display:flex;
  align-items:center;
  gap:7px;
  border:0;
  background:none;
  color:var(--kcds-color-text-secondary);
  font-size:11px;
  padding:7px
}
.ds-page-context svg {
  width:14px
}
.ds-preview-settings {
  display:flex;
  align-items:center;
  gap:18px;
  border:1px solid var(--kcds-color-border-subtle);
  border-radius:14px;
  padding:13px 17px;
  background:var(--kcds-color-surface-default);
  margin-bottom:32px;
  font-size:12px;
  flex-wrap:wrap
}
.ds-preview-settings>span {
  display:flex;
  align-items:center;
  gap:8px;
  margin-right:auto;
  font-size:11px;
  color:var(--kcds-color-text-secondary)
}
.ds-preview-settings>span svg {
  width:16px
}
.ds-preview-settings label {
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--kcds-color-text-secondary);
  font-size:11px
}
.ds-preview-settings select {
  border:1px solid var(--kcds-color-border-subtle);
  border-radius:7px;
  background:var(--kcds-color-surface-canvas);
  color:var(--kcds-color-text-primary);
  padding:6px 9px;
  font-size:12px
}
.ds-preview-settings button {
  display:grid;
  place-items:center;
  background:var(--kcds-color-surface-canvas);
  border:1px solid var(--kcds-color-border-subtle);
  border-radius:7px;
  padding:6px;
  color:var(--kcds-color-text-primary)
}
.ds-preview-settings button svg {
  width:17px;
  height:17px
}
.ds-article-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) 155px;
  gap:35px
}
.ds-on-page {
  position:sticky;
  top:105px;
  align-self:start;
  border-left:1px solid var(--kcds-color-border-subtle);
  padding-left:20px;
  font-size:10px;
  color:var(--kcds-color-text-secondary)
}
.ds-on-page>span {
  letter-spacing:.08em
}
.ds-on-page nav {
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:20px
}
.ds-on-page nav a {
  font-size:11px;
  color:var(--kcds-color-text-secondary);
  text-decoration:none;
  line-height:1.5
}
.ds-on-page nav a:hover {
  color:var(--kcds-color-text-link)
}
.ds-side-tip {
  border-top:1px solid var(--kcds-color-border-subtle);
  margin-top:26px;
  padding-top:22px
}
.ds-side-tip>b {
  display:block;
  margin:12px 0 8px;
  font-size:11px;
  color:var(--kcds-color-text-primary)
}
.ds-side-tip p {
  font-size:11px;
  line-height:1.6
}
.ds-article-grid article {
  min-width:0
}
.ds-main .doc-section {
  padding:0;
  border:0
}
.ds-main .doc-eyebrow {
  display:none
}
.ds-main .doc-h1 {
  font:800 clamp(40px,4.3vw,62px)/1.07 Manrope,Lato,sans-serif;
  letter-spacing:-.05em;
  margin:0 0 22px;
  color:var(--kcds-color-text-primary)
}
.ds-main .doc-h3 {
  font-size:23px;
  letter-spacing:-.025em;
  margin:46px 0 20px;
  color:var(--kcds-color-text-primary)
}
.ds-main .doc-text {
  font-size:15px;
  line-height:1.75;
  max-width:760px;
  color:var(--kcds-color-text-secondary)
}
.ds-main .doc-section>.doc-text:first-of-type {
  font-size:18px;
  line-height:1.7;
  max-width:750px;
  margin-bottom:35px
}
.ds-main .density-split {
  grid-template-columns:1fr;
  gap:22px;
  margin:24px 0
}
.ds-main .density-split__col {
  border:1px solid var(--kcds-color-border-subtle);
  border-radius:18px;
  overflow:hidden;
  background:var(--kcds-color-surface-default)
}
.ds-main .density-split__head {
  background:var(--kcds-color-surface-default);
  padding:16px 22px;
  border-bottom:1px solid var(--kcds-color-border-subtle)
}
.ds-main .density-split__body {
  padding:25px
}
.ds-main .state-grid__label {
  font-size:12px
}
.ds-main .spec-table {
  border-radius:12px;
  overflow:hidden;
  font-size:12px;
  width:100%;
  margin:25px 0
}
.ds-main .spec-table th {
  background:var(--kcds-color-surface-default);
  padding:14px 16px;
  color:var(--kcds-color-text-secondary);
  font-size:11px;
  letter-spacing:.02em
}
.ds-main .spec-table td {
  padding:14px 16px
}
.ds-main pre {
  max-width:100%;
  overflow:auto
}
.ds-main .swatch-grid {
  gap:12px
}
.ds-main .swatch {
  border-radius:14px;
  overflow:hidden
}
.ds-main .doc-rule,
.ds-main .doc-note {
  border-radius:14px;
  padding:20px;
  font-size:14px
}
.ds-page-pagination {
  display:flex;
  justify-content:space-between;
  gap:20px;
  border-top:1px solid var(--kcds-color-border-subtle);
  padding-top:28px;
  margin-top:55px
}
.ds-page-pagination a {
  text-decoration:none;
  border:1px solid var(--kcds-color-border-subtle);
  padding:20px;
  border-radius:14px;
  width:48%;
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:16px
}
.ds-page-pagination small {
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--kcds-color-text-secondary)
}
.ds-page-pagination a:last-child {
  text-align:right;
  margin-left:auto
}
.ds-toast {
  position:fixed;
  left:50%;
  bottom:25px;
  transform:translate(-50%,20px);
  background:var(--kcds-site-ds-toast-background-2);
  color:white;
  border-radius:12px;
  padding:13px 22px;
  box-shadow:0 8px 35px var(--kcds-site-material-box-shadow-30);
  font-size:13px;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s,transform .2s;
  z-index:200
}
.ds-toast.visible {
  opacity:1;
  transform:translate(-50%,0)
}
#ds-catalog>h1 {
  font:800 55px/1.1 Manrope,sans-serif;
  letter-spacing:-.05em;
  margin:0 0 20px
}
.ds-lede {
  font-size:17px;
  line-height:1.7;
  color:var(--kcds-color-text-secondary)
}
.ds-catalog-search {
  display:flex;
  align-items:center;
  gap:15px;
  padding:16px 20px;
  border:1px solid var(--kcds-color-border-subtle);
  border-radius:14px;
  margin:30px 0 18px
}
.ds-catalog-search input {
  width:100%;
  border:0;
  background:none;
  outline:none;
  color:inherit;
  font-size:15px
}
.ds-catalog-search:focus-within {
  outline:2px solid var(--kcds-blue-500)
}
.ds-catalog-filters {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:30px
}
.ds-catalog-filters button {
  border:1px solid var(--kcds-color-border-subtle);
  border-radius:30px;
  padding:10px 16px;
  background:var(--kcds-color-surface-canvas);
  color:inherit;
  font-size:12px
}
.ds-catalog-filters button[aria-pressed=true] {
  background:var(--kcds-site-ds-catalog-filters-background-6);
  color:white;
  border-color:var(--kcds-site-ds-catalog-filters-background-6)
}
.ds-catalog-group {
  margin-top:30px
}
.ds-catalog-group h2 {
  font-size:23px;
  margin-bottom:18px;
  letter-spacing:-.02em
}
.ds-catalog-group>div {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px
}
.ds-catalog-group a {
  border:1px solid var(--kcds-color-border-subtle);
  border-radius:15px;
  padding:21px 18px;
  text-decoration:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-size:14px;
  background:var(--kcds-color-surface-canvas)
}
.ds-catalog-group a:hover {
  background:var(--kcds-color-surface-default)
}
.ds-catalog-group svg {
  width:16px;
  color:var(--kcds-color-text-secondary)
}
body.ds-material {
  background:var(--kcds-color-surface-canvas)
}
.ds-material .ds-sidebar {
  background:var(--kcds-site-ds-material-background-13)
}
.ds-material .ds-overview-hero {
  border-radius:30px
}
.ds-material .ds-overview-hero>div {
  background:var(--kcds-site-ds-material-background-14)
}
.ds-material .ds-overview-hero h1 {
  font-weight:500
}
.ds-material .ds-hero-actions a:first-child {
  background:var(--kcds-site-ds-material-background-15);
  border-color:var(--kcds-site-ds-material-background-15)
}
.ds-material .ds-card {
  border:0;
  background:var(--kcds-color-surface-default);
  border-radius:27px
}
.ds-material .ds-card-art {
  border-radius:27px
}
.ds-material .ds-card h3 {
  font-family:var(--kcds-font-site);
  font-weight:500
}
.ds-material .ds-filter {
  border:0;
  border-radius:25px;
  background:var(--kcds-site-ds-material-background-16)
}
.ds-material .ds-nav-group a,
.ds-material .ds-overview-link {
  border-radius:25px
}
.ds-material .ds-sidebar a[aria-current=page] {
  background:var(--kcds-site-ds-material-background-17)
}
.ds-material .ds-main .doc-h1 {
  font-weight:500
}
.ds-material .ds-preview-settings {
  border:0;
  border-radius:25px;
  background:var(--kcds-site-ds-material-background-18)
}
.ds-material .ds-main .density-split__col {
  border-radius:25px
}
.ds-material .ds-catalog-group a {
  border:0;
  background:var(--kcds-color-surface-default);
  border-radius:22px
}
.ds-material .ds-catalog-filters button[aria-pressed=true] {
  background:var(--kcds-site-ds-material-background-15);
  border-color:var(--kcds-site-ds-material-background-15)
}
.ds-material #ds-catalog>h1 {
  font-weight:500
}
.ds-material .ds-guidance>div {
  border-radius:27px
}
.ds-material .ds-preview-settings select {
  border-radius:18px;
  padding:7px 12px
}
body[data-kcds-theme=dark] .ds-header img {
  filter:brightness(0) invert(1)
}
body[data-kcds-theme=dark] .ds-sidebar a[aria-current=page] {
  background:var(--kcds-site-ds-sidebar-background-7);
  color:var(--kcds-site-ds-sidebar-color-4)
}
body[data-kcds-theme=dark].ds-material .ds-sidebar {
  background:var(--kcds-site-ds-material-background-19)
}
body[data-kcds-theme=dark].ds-material .ds-preview-settings,
body[data-kcds-theme=dark].ds-material .ds-filter {
  background:var(--kcds-site-ds-material-background-20)
}
body[data-kcds-theme=dark] .ds-overview-hero .ds-eyebrow {
  color:var(--kcds-site-ds-overview-hero-color-6)
}
@media(min-width:1700px) {
.ds-main {
  padding-inline:65px
}
.ds-main .density-split {
  grid-template-columns:1fr 1fr
}
}
@media(max-width:1200px) {
.ds-shell {
  grid-template-columns:230px minmax(0,1fr)
}
.ds-header {
  padding-inline:22px
}
.ds-main {
  padding-inline:28px
}
.ds-overview-hero {
  grid-template-columns:1.3fr 1fr
}
.ds-overview-hero>div {
  padding:30px 25px
}
.ds-overview-hero h1 {
  font-size:43px
}
.ds-overview-hero p {
  font-size:14px
}
.ds-card-grid {
  gap:12px
}
.ds-card-art {
  height:145px
}
.ds-card>div:last-child {
  padding:17px
}
.ds-card h3 {
  font-size:17px
}
.ds-card p {
  font-size:11px
}
.ds-article-grid {
  grid-template-columns:minmax(0,1fr)
}
.ds-on-page {
  display:none
}
.ds-catalog-group>div {
  grid-template-columns:repeat(2,minmax(0,1fr))
}
}
@media(max-width:850px) {
.ds-shell {
  grid-template-columns:1fr
}
.ds-sidebar {
  position:fixed;
  z-index:90;
  left:0;
  top:74px;
  width:280px;
  bottom:0;
  transform:translateX(-100%);
  transition:transform .25s;
  box-shadow:10px 15px 35px var(--kcds-site-material-box-shadow-30)
}
.ds-nav-open .ds-sidebar {
  transform:translateX(0)
}
.ds-menu-toggle {
  display:grid
}
.ds-header {
  gap:15px
}
.ds-header nav {
  gap:14px
}
.ds-header nav>a:first-child {
  display:none
}
.ds-brand {
  font-size:21px
}
.ds-brand img {
  width:140px
}
.ds-main {
  padding:25px 25px 0
}
.ds-overview-hero>img {
  min-height:350px
}
.ds-overview-hero>div {
  padding:30px
}
.ds-hero-actions a {
  font-size:11px
}
.ds-overview-hero h1 {
  font-size:42px
}
.ds-overview-hero p {
  font-size:14px
}
}
@media(max-width:560px) {
.ds-header {
  height:65px;
  padding:0 14px;
  gap:10px
}
.ds-brand img {
  width:116px
}
.ds-brand {
  font-size:18px;
  gap:6px
}
.ds-header nav {
  gap:8px
}
.ds-header nav>a {
  display:none
}
.ds-header nav button {
  padding:7px
}
.ds-sidebar {
  top:65px;
  height:calc(100dvh - 65px)
}
.ds-main {
  padding:22px 18px 0
}
.ds-crumb {
  font-size:10px;
  margin-bottom:20px
}
.ds-overview-hero {
  grid-template-columns:1fr
}
.ds-overview-hero>div {
  padding:29px 25px
}
.ds-overview-hero h1 {
  font-size:41px
}
.ds-overview-hero>img {
  height:220px;
  min-height:220px
}
.ds-intro-strip {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  padding:24px 3px
}
.ds-intro-strip span {
  font-size:10px;
  gap:7px
}
.ds-intro-strip b {
  font-size:21px
}
.ds-heading-row {
  display:block;
  margin-top:35px
}
.ds-heading-row h2 {
  font-size:25px
}
.ds-heading-row>a {
  margin-top:15px
}
.ds-card-grid {
  grid-template-columns:1fr 1fr;
  gap:10px
}
.ds-card-art {
  height:125px
}
.ds-card>div:last-child {
  padding:15px 13px
}
.ds-card h3 {
  font-size:16px;
  max-width:90%
}
.ds-card p {
  font-size:10px
}
.ds-card>div:last-child>svg {
  width:12px;
  right:9px;
  top:16px
}
.ds-card-colors .ds-card-art {
  padding:20px;
  gap:5px
}
.ds-card-colors .ds-card-art>span {
  width:23px;
  height:61px
}
.ds-card-colors .ds-card-art>span:nth-child(2n) {
  height:80px
}
.ds-card-type .ds-card-art>b {
  font-size:75px
}
.example-button {
  font-size:10px;
  padding:12px;
  gap:7px;
  border-radius:12px
}
.example-button svg {
  width:13px;
  height:13px
}
.ds-card-icons .ds-card-art {
  grid-template-columns:repeat(3,20px);
  gap:14px
}
.ds-card-icons .ds-card-art>svg {
  width:19px;
  height:19px
}
.ds-card-ai .ds-card-art>svg {
  width:55px;
  height:55px
}
.ds-guidance {
  grid-template-columns:1fr;
  gap:15px
}
.ds-guidance>div {
  padding:25px
}
.ds-footer {
  flex-direction:column;
  gap:15px;
  margin-top:45px;
  font-size:10px
}
.ds-main .doc-h1 {
  font-size:40px
}
.ds-main .doc-section>.doc-text:first-of-type {
  font-size:16px
}
.ds-main .doc-h3 {
  font-size:21px;
  margin-top:35px
}
.ds-preview-settings {
  padding:14px;
  gap:12px;
  border-radius:16px
}
.ds-preview-settings>span {
  width:100%
}
.ds-preview-settings label {
  font-size:10px;
  gap:6px
}
.ds-preview-settings select {
  font-size:11px;
  padding:6px
}
.ds-preview-settings>button {
  margin-left:auto
}
.ds-page-context {
  font-size:9px;
  gap:10px
}
.ds-page-context button {
  font-size:10px
}
.ds-main .density-split__body {
  padding:17px
}
.ds-main .density-split__head {
  padding:14px 17px
}
.ds-main .spec-table {
  display:block;
  overflow-x:auto;
  white-space:normal
}
.ds-main .spec-table td,
.ds-main .spec-table th {
  padding:10px;
  min-width:90px
}
.ds-main .state-grid__demo {
  gap:8px;
  flex-wrap:wrap
}
.ds-main .doc-text {
  font-size:14px
}
.ds-catalog-group>div {
  grid-template-columns:1fr 1fr;
  gap:9px
}
.ds-catalog-group a {
  font-size:12px;
  padding:17px 13px;
  border-radius:13px
}
.ds-catalog-group svg {
  width:13px
}
.ds-catalog-group h2 {
  font-size:21px
}
#ds-catalog>h1 {
  font-size:40px
}
.ds-lede {
  font-size:15px
}
.ds-catalog-filters button {
  font-size:10px;
  padding:9px 12px
}
.ds-page-pagination a {
  padding:16px;
  font-size:13px;
  border-radius:12px
}
.ds-page-pagination small {
  font-size:9px
}
}
@media(prefers-reduced-motion:reduce) {
* {
  scroll-behavior:auto!important;
  transition:none!important;
  animation:none!important
}
}
.kc-brand-picture {
  display:inline-flex;
  align-items:center;
  flex-shrink:0
}
.kc-brand-picture img {
  width:165px;
  height:auto;
  filter:none
}
.kc-brand-picture [data-brand-dark] {
  display:none
}
.dark .kc-brand-picture [data-brand-light],
body[data-kcds-theme=dark] .kc-brand-picture [data-brand-light] {
  display:none
}
.dark .kc-brand-picture [data-brand-dark],
body[data-kcds-theme=dark] .kc-brand-picture [data-brand-dark] {
  display:block
}
}
@layer site {
.footer-credit {
  display:block;
  font-size:12px;
  line-height:1.7;
  color:var(--kcds-color-text-secondary);
  grid-column:1/-1;
  margin:0
}
.footer-bottom {
  flex-wrap:wrap
}
.footer-bottom .footer-credit {
  width:100%;
  margin-top:12px
}
.ds-footer {
  flex-wrap:wrap
}
.ds-footer .footer-credit {
  width:100%;
  color:var(--kcds-color-text-secondary);
  font-size:11px
}
.dark .material {
  color:var(--kcds-color-text-primary);
  background:var(--kcds-color-surface-canvas)
}
.dark .material .m-rail {
  background:var(--kcds-site-dark-background-56);
  color:var(--kcds-site-dark-color-44);
  border-right:1px solid var(--kcds-site-dark-border-right-2)
}
.dark .material .m-rail nav a[aria-current=page]>svg {
  background:var(--kcds-site-dark-background-57);
  color:var(--kcds-site-dark-color-45)
}
.dark .material .rail-bottom button {
  border-color:var(--kcds-site-dark-border-color-13);
  color:var(--kcds-site-dark-color-44)
}
.dark .material .m-hero-copy {
  background:var(--kcds-site-dark-background-58);
  color:var(--kcds-site-dark-color-46)
}
.dark .material .m-eyebrow {
  color:var(--kcds-site-dark-color-47)
}
.dark .material .m-hero-copy>p {
  color:var(--kcds-site-dark-color-48)
}
.dark .material .m-button {
  background:var(--kcds-site-dark-background-59);
  color:var(--kcds-site-dark-color-49)
}
.dark .material .m-button:hover {
  background:var(--kcds-site-dark-background-60)
}
.dark .material .m-product {
  background:color-mix(in srgb,var(--kcds-color-primary) 16%,var(--kcds-site-dark-background-61));
  color:var(--kcds-color-primary-tint)
}
.dark .material .m-product-detail {
  color:var(--kcds-site-dark-color-50)
}
.dark .material .m-detail-copy>p,
.dark .material .m-product-list {
  color:var(--kcds-site-dark-color-51)
}
.dark .material .m-detail-copy>.pill-link {
  background:var(--kcds-site-dark-background-63);
  border:1px solid var(--kcds-site-dark-border-8);
  color:var(--kcds-site-dark-color-52)
}
.dark .material .m-detail-copy>.pill-link svg {
  color:var(--kcds-site-dark-color-53)
}
.dark .material .m-suite-scene>img {
  filter:brightness(.78) saturate(.88)
}
.dark .material .m-suite-scene .m-demo-card,
.dark .material .m-demo-card {
  background:var(--kcds-site-dark-background-64);
  color:var(--kcds-site-dark-color-54);
  border:1px solid var(--kcds-site-dark-border-9);
  box-shadow:0 15px 40px var(--kcds-site-dark-box-shadow-3)
}
.dark .material .m-demo-top {
  border-color:var(--kcds-site-dark-border-color-14)
}
.dark .material .demo-avatar {
  background:color-mix(in srgb,var(--kcds-color-primary) 22%,var(--kcds-site-dark-background-65));
  color:var(--kcds-color-primary-tint)
}
.dark .material .demo-eyebrow,
.dark .material .m-demo-progress>div:last-child>small {
  color:var(--kcds-site-dark-color-55)
}
.dark .material .progress-ring {
  background:conic-gradient(color-mix(in srgb,var(--kcds-color-primary) 65%,white) 60%,var(--kcds-site-dark-background-66) 60%)
}
.dark .material .progress-ring>b {
  background:var(--kcds-site-dark-background-67);
  color:var(--kcds-site-dark-color-54)
}
.dark .material .m-demo-card>a {
  background:color-mix(in srgb,var(--kcds-color-primary) 24%,var(--kcds-site-dark-background-68));
  border:1px solid color-mix(in srgb,var(--kcds-color-primary) 45%,var(--kcds-site-dark-border-10));
  color:var(--kcds-site-dark-color-56)
}
.dark .material .m-card {
  background:var(--kcds-site-dark-background-69);
  color:var(--kcds-site-dark-color-50);
  border:1px solid var(--kcds-site-dark-border-11)
}
.dark .material .m-card-copy p {
  color:var(--kcds-site-dark-color-57)
}
.dark .material .m-card-copy>svg {
  color:var(--kcds-site-dark-color-58)
}
.dark .material .m-colors .m-card-art {
  background:var(--kcds-site-dark-background-70)
}
.dark .material .m-type .m-card-art {
  background:var(--kcds-site-dark-background-71)
}
.dark .material .m-type-art>b,
.dark .material .m-type-art>span {
  color:var(--kcds-site-dark-color-59)
}
.dark .material .m-shape .m-card-art {
  background:var(--kcds-site-dark-background-72)
}
.dark .material .m-motion .m-card-art {
  background:var(--kcds-site-dark-background-73)
}
.dark .material .m-motion-art>span {
  color:var(--kcds-site-dark-color-60)
}
.dark .material .m-actions .m-card-art {
  background:var(--kcds-site-dark-background-74)
}
.dark .material .m-feedback .m-card-art {
  background:var(--kcds-site-dark-background-75)
}
.dark .material .m-selection .m-card-art {
  background:var(--kcds-site-dark-background-76)
}
.dark .material .m-feedback-art>span {
  color:var(--kcds-site-dark-color-61)
}
.dark .material .m-feedback-art>div {
  color:var(--kcds-site-dark-color-62)
}
.dark .material .m-select-art {
  background:var(--kcds-site-dark-background-77);
  color:var(--kcds-site-dark-color-63)
}
.dark .material .live-studio {
  background:var(--kcds-site-dark-background-62);
  border:1px solid var(--kcds-site-dark-border-11)
}
.dark .material .studio-shell {
  background:var(--kcds-site-dark-background-78);
  border:1px solid var(--kcds-site-dark-border-12)
}
.dark .material .studio-controls {
  background:var(--kcds-site-dark-background-79)
}
.dark .material .studio-heading .eyebrow {
  color:var(--kcds-site-dark-color-64)
}
.dark .material .studio-controls button {
  color:var(--kcds-site-dark-color-65)
}
.dark .material .studio-controls legend,
.dark .material .studio-range {
  color:var(--kcds-site-dark-color-66)
}
.dark .material .m-ai-banner {
  background:var(--kcds-site-dark-background-80);
  color:var(--kcds-site-dark-color-67);
  border:1px solid var(--kcds-site-dark-border-13)
}
.dark .material .m-ai-banner p {
  color:var(--kcds-site-dark-color-68)
}
.dark .material .m-ai-banner .m-eyebrow {
  color:var(--kcds-site-dark-color-69)
}
.dark .material .m-ai-banner .m-button {
  background:var(--kcds-site-dark-background-81);
  color:var(--kcds-site-dark-color-70)
}
.dark .material .m-ai-art>svg {
  color:var(--kcds-site-dark-color-71);
  fill:var(--kcds-site-dark-color-71);
  stroke:var(--kcds-site-dark-color-71)
}
.dark .material .m-ai-art>div {
  background:var(--kcds-site-dark-background-82);
  color:var(--kcds-site-dark-color-72)
}
.dark .material .m-ai-art>span {
  border-color:var(--kcds-site-dark-border-color-15);
  color:var(--kcds-site-dark-color-73)
}
.dark .material .m-next>div>a {
  border:1px solid var(--kcds-site-dark-border-14)
}
.dark .material .art-stamp,
.dark .material .motion-button {
  background:var(--kcds-site-dark-background-84);
  color:var(--kcds-site-dark-color-75)
}
.dark .material .m-hero-art {
  background:var(--kcds-site-dark-background-85)
}
.dark .material .m-hero-art>img {
  filter:brightness(.8) saturate(.94)
}
.dark .material .studio-canvas:not(.is-dark) .studio-example {
  color:var(--kcds-site-material-color-78)
}
.dark .material .studio-canvas:not(.is-dark) .studio-token {
  color:var(--kcds-site-material-color-78)
}
.dark .material .studio-canvas:not(.is-dark) .studio-token button {
  color:var(--kcds-site-material-color-78)
}
.dark .material .studio-canvas.is-dark .studio-token button {
  color:var(--kcds-site-material-color-83)
}
body.ds-material[data-kcds-theme=dark] .ds-overview-hero>div {
  background:var(--kcds-site-ds-material-background-21);
  color:var(--kcds-site-ds-material-color-10)
}
body.ds-material[data-kcds-theme=dark] .ds-overview-hero p {
  color:var(--kcds-site-ds-material-color-11)
}
body.ds-material[data-kcds-theme=dark] .ds-overview-hero .ds-eyebrow {
  color:var(--kcds-site-ds-material-color-12)
}
body.ds-material[data-kcds-theme=dark] .ds-overview-hero>img {
  filter:brightness(.8)
}
body.ds-material[data-kcds-theme=dark] .ds-hero-actions a {
  color:var(--kcds-site-ds-material-color-13);
  border-color:var(--kcds-site-ds-material-border-color-2)
}
body.ds-material[data-kcds-theme=dark] .ds-hero-actions a:first-child {
  background:var(--kcds-site-dark-background-59);
  border-color:var(--kcds-site-dark-background-59);
  color:var(--kcds-site-dark-color-49)
}
body.ds-material[data-kcds-theme=dark] .ds-card-type .ds-card-art {
  background:var(--kcds-site-ds-material-background-22)
}
body.ds-material[data-kcds-theme=dark] .ds-card-type .ds-card-art>b {
  color:var(--kcds-site-ds-material-color-14)
}
body.ds-material[data-kcds-theme=dark] .ds-card-colors .ds-card-art {
  background:var(--kcds-site-ds-material-background-23)
}
body.ds-material[data-kcds-theme=dark] .ds-card-buttons .ds-card-art {
  background:var(--kcds-site-dark-background-70)
}
body.ds-material[data-kcds-theme=dark] .ds-card-ai .ds-card-art {
  background:var(--kcds-site-ds-material-background-24)
}
body.ds-material[data-kcds-theme=dark] .ds-card-ai .ds-card-art>svg {
  color:var(--kcds-site-ds-material-color-15)
}
body.ds-material[data-kcds-theme=dark] .ds-card-icons .ds-card-art {
  background:var(--kcds-site-ds-material-background-25)
}
body.ds-material[data-kcds-theme=dark] .ds-card-icons .ds-card-art>svg {
  color:var(--kcds-site-ds-material-color-16)
}
@media(max-width:760px) {
.footer-credit {
  font-size:11px
}
}
.material .m-product-grid {
  gap:10px;
  padding-bottom:14px
}
.material .m-product {
  position:relative;
  overflow:visible
}
.material .m-product small {
  display:block;
  font-size:15px;
  line-height:1.4;
  margin-top:7px;
  font-weight:500
}
.material .m-product[aria-pressed=true] {
  border-color:transparent;
  border-radius:24px 24px 0 0;
  background:var(--kcds-color-primary-tint);
  transform:none
}
.material .m-product[aria-pressed=true]::after {
  content:"";
  position:absolute;
  left:-2px;
  right:-2px;
  top:100%;
  height:18px;
  background:inherit;
  pointer-events:none
}
.material .m-product-detail {
  position:relative;
  isolation:isolate;
  margin-top:0;
  padding:56px 44px;
  min-height:520px;
  grid-template-columns:1fr 1fr;
  gap:0;
  overflow:hidden
}
.material .m-product-grid:has(.m-product:first-child[aria-pressed=true])+.m-product-detail {
  border-top-left-radius:0
}
.material .m-product-grid:has(.m-product:last-child[aria-pressed=true])+.m-product-detail {
  border-top-right-radius:0
}
.material .m-detail-copy {
  position:relative;
  z-index:2;
  padding-right:28px
}
.material .m-suite-scene {
  position:absolute;
  inset:0 0 0 43%;
  min-height:0;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:38px 30px;
  z-index:-1
}
.material .m-suite-scene>img {
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  border-radius:0;
  mask-image:linear-gradient(to right,transparent 0%,var(--kcds-site-material-mask-image-2) 34%);
  transform:none
}
.material .m-suite-scene .m-demo-card {
  width:76%;
  max-width:340px;
  margin:0;
  position:relative;
  box-shadow:0 20px 55px var(--kcds-site-material-box-shadow-31)
}
.dark .material .m-product[aria-pressed=true] {
  background:color-mix(in srgb,var(--kcds-color-primary) 12%,var(--kcds-site-dark-background-62));
  border-color:transparent
}
@media(max-width:1100px) {
.material .m-product {
  padding:18px 12px;
  gap:8px
}
.material .m-product small {
  font-size:14px
}
.material .m-product>svg {
  display:none
}
.material .m-product-detail {
  padding:40px 28px
}
.material .m-suite-scene {
  left:40%;
  padding:30px 20px
}
.material .m-suite-scene .m-demo-card {
  width:80%
}
}
@media(max-width:760px) {
.material .m-product-grid {
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:4px;
  padding-bottom:12px
}
.material .m-product {
  padding:13px 4px;
  display:block;
  text-align:center;
  border-radius:16px
}
.material .m-product[aria-pressed=true] {
  border-radius:16px 16px 0 0
}
.material .m-suite-symbol {
  display:none
}
.material .m-product b {
  font-size:14px
}
.material .m-product small {
  font-size:12px;
  line-height:1.3;
  margin-top:6px
}
.material .m-product[aria-pressed=true]::after {
  height:16px
}
.material .m-product-detail {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  padding:28px 22px 0;
  min-height:0
}
.material .m-detail-copy {
  padding-right:0
}
.material .m-suite-scene {
  position:relative;
  inset:auto;
  margin:10px -22px 0;
  min-height:390px;
  padding:65px 20px 28px;
  z-index:0
}
.material .m-suite-scene>img {
  mask-image:linear-gradient(to bottom,transparent,var(--kcds-site-material-mask-image-2) 35%)
}
.material .m-suite-scene .m-demo-card {
  width:88%;
  max-width:300px;
  margin:0;
  padding:22px
}
}
.material .m-color-art span {
  animation:palette-float 6s ease-in-out infinite
}
.material .m-color-art span:nth-child(2) {
  animation-delay:-1.5s
}
.material .m-color-art span:nth-child(3) {
  animation-delay:-3s
}
.material .m-color-art span:nth-child(4) {
  animation-delay:-4.5s
}
.material .m-type-art>b {
  animation:type-breathe 7s ease-in-out infinite;
  transform-origin:center
}
.material .m-type-art>span {
  animation:type-reveal 7s ease-in-out infinite
}
.material .m-shape-art {
  animation:spacing-breathe 6s ease-in-out infinite
}
.material .m-shape-art span {
  animation:shape-breathe 6s ease-in-out infinite
}
.material .m-shape-art span:nth-child(2) {
  animation-delay:-2s
}
.material .m-shape-art span:nth-child(3) {
  animation-delay:-4s
}
.material .m-buttons-art>span:first-child {
  animation:action-press 5s ease-in-out infinite
}
.material .m-buttons-art>span:first-child svg {
  animation:action-arrow 5s ease-in-out infinite
}
.material .m-buttons-art>i {
  animation:saved-pop 5s ease-in-out infinite
}
.material .m-feedback-art>div>i {
  background:var(--kcds-site-material-background-122);
  overflow:hidden
}
.material .m-feedback-art>div>i::after {
  content:"";
  display:block;
  width:100%;
  height:100%;
  background:var(--kcds-site-material-background-121);
  border-radius:inherit;
  transform-origin:left;
  animation:learning-fill 6s ease-in-out infinite
}
.material .m-feedback-art>span {
  animation:feedback-toast 6s ease-in-out infinite
}
.material .m-select-art b,
.material .m-select-art b:first-child {
  background:transparent;
  color:var(--kcds-site-material-color-87);
  border:1px solid var(--kcds-site-material-border-19);
  animation:selection-cycle 9s step-end infinite
}
.material .m-select-art b:nth-child(2) {
  animation-delay:-6s
}
.material .m-select-art b:nth-child(3) {
  animation-delay:-3s
}
.material .m-select-art b:first-child svg {
  display:none
}
.material .m-card:not(.motion-in-view) .m-card-art *,
.material .m-card:not(.motion-in-view) .m-card-art *::after {
  animation-play-state:paused
}
.motion-paused .material .m-card-art *,
.motion-paused .material .m-card-art *::after {
  animation-play-state:paused
}
@keyframes palette-float {
0%,100% {
  translate:0 0;
  rotate:0deg
}
50% {
  translate:0 -12px;
  rotate:9deg
}
}
@keyframes type-breathe {
0%,100% {
  scale:1;
  letter-spacing:-.06em
}
45%,60% {
  scale:1.07;
  letter-spacing:-.025em
}
}
@keyframes type-reveal {
0%,100% {
  translate:0 0;
  opacity:1
}
50% {
  translate:6px 0;
  opacity:.7
}
}
@keyframes spacing-breathe {
0%,100% {
  gap:12px
}
50% {
  gap:24px
}
}
@keyframes shape-breathe {
0%,100% {
  translate:0 0
}
50% {
  translate:0 -9px
}
}
@keyframes action-press {
0%,30%,55%,100% {
  scale:1
}
40% {
  scale:.95
}
}
@keyframes action-arrow {
0%,30%,100% {
  translate:0 0
}
50%,65% {
  translate:8px 0
}
}
@keyframes saved-pop {
0%,30% {
  scale:.75;
  opacity:.35
}
48%,85% {
  scale:1;
  opacity:1
}
100% {
  scale:.75;
  opacity:.35
}
}
@keyframes learning-fill {
0%,12% {
  transform:scaleX(.18)
}
65%,85% {
  transform:scaleX(1)
}
100% {
  transform:scaleX(.18)
}
}
@keyframes feedback-toast {
0%,45%,100% {
  opacity:.5;
  translate:0 5px
}
65%,85% {
  opacity:1;
  translate:0 0
}
}
@keyframes selection-cycle {
0%,32% {
  background:var(--kcds-periwinkle-500);
  color:white;
  border-color:var(--kcds-periwinkle-500)
}
33%,100% {
  background:transparent;
  color:var(--kcds-site-material-color-87);
  border-color:var(--kcds-site-material-border-19)
}
}
@media(prefers-reduced-motion:reduce) {
.material .m-card-art *,
.material .m-card-art *::after {
  animation:none!important
}
}
.material .company-story {
  margin:56px 35px 0;
  padding:44px;
  background:var(--kcds-site-material-background-142);
  border-radius:32px;
  gap:40px
}
.material .company-facts {
  gap:12px
}
.material .company-facts article {
  border:0;
  background:var(--kcds-site-material-background-143);
  border-radius:24px;
  padding:25px;
  min-width:0
}
.material .company-facts article:nth-child(2) {
  background:var(--kcds-site-material-background-144)
}
.material .company-facts article:nth-child(3) {
  background:var(--kcds-site-material-background-145)
}
.material .company-facts small {
  padding:4px 8px;
  font-size:11px
}
.material .m-next {
  margin:20px 35px 45px;
  padding:44px;
  background:var(--kcds-site-material-background-146);
  border-radius:32px;
  align-items:center
}
.material .m-next>div>a {
  background:var(--kcds-site-material-background-147)
}
.material .m-next>div>a:hover {
  background:var(--kcds-gray-0)
}
.dark .material .company-story {
  background:var(--kcds-site-dark-background-86)
}
.dark .material .company-facts article {
  background:var(--kcds-site-dark-background-87)
}
.dark .material .company-facts article:nth-child(2) {
  background:var(--kcds-site-dark-background-88)
}
.dark .material .company-facts article:nth-child(3) {
  background:var(--kcds-site-dark-background-89)
}
.dark .material .m-next {
  background:var(--kcds-site-dark-background-90)
}
@media(max-width:1100px) {
.material .company-story {
  margin-inline:20px;
  padding:32px;
  gap:28px
}
.material .m-next {
  margin-inline:20px;
  padding:32px
}
.material .company-facts article {
  padding:20px
}
}
@media(max-width:760px) {
.material .company-story {
  margin:36px 12px 0;
  padding:26px 20px;
  border-radius:25px
}
.material .company-facts {
  grid-template-columns:1fr
}
.material .company-facts article {
  padding:22px
}
.material .m-next {
  margin:16px 12px 35px;
  padding:28px 22px;
  border-radius:25px
}
.material .m-next h2 {
  font-size:34px
}
}
.material .m-search {
  background:transparent;
  color:inherit;
  border:1px solid var(--kcds-site-material-border-22);
  border-radius:18px;
  width:64px;
  height:50px;
  transition:background .2s,border-color .2s
}
.material .m-search:hover {
  background:var(--kcds-site-material-background-148);
  border-color:var(--kcds-site-material-border-color-7)
}
.material .m-rail nav a {
  width:100%;
  line-height:1.3;
  transition:background .2s,border-color .2s
}
.material .m-rail nav a>svg {
  width:23px;
  height:23px;
  padding:0;
  border-radius:0;
  background:transparent;
  color:inherit
}
.material .m-rail nav a:hover {
  background:var(--kcds-site-material-background-149)
}
.material .m-rail nav a[aria-current=page] {
  border-color:var(--kcds-site-material-border-color-8)
}
.dark .material .m-search {
  background:transparent;
  color:var(--kcds-site-dark-color-44);
  border-color:var(--kcds-site-dark-border-color-16)
}
.dark .material .m-search:hover,
.dark .material .m-rail nav a:hover {
  background:var(--kcds-site-dark-background-93)
}
.dark .material .m-rail nav a[aria-current=page] {
  border-color:var(--kcds-site-dark-border-color-17)
}
@media(max-width:760px) {
.material .m-search {
  width:54px;
  height:46px
}
.material .m-rail nav {
  gap:6px
}
.material .m-rail nav a {
  padding:9px 1px
}
}
.material .m-hero-art>img {
  object-position:center;
  animation:none
}
@media(max-width:760px) {
.material .m-hero-art {
  max-height:none
}
}
@media(max-width:760px) {
}
.system-catalog {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  color:var(--kcds-site-material-background-77)
}
.system-catalog>a {
  border-radius:28px;
  overflow:hidden;
  position:relative;
  transition:translate .25s,box-shadow .25s
}
.system-catalog>a:hover {
  translate:0 -4px;
  box-shadow:0 14px 28px var(--kcds-site-system-catalog-box-shadow-2)
}
.catalog-intro {
  grid-column:1/-1;
  display:grid;
  grid-template-columns:1.3fr 1fr;
  align-items:center;
  background:var(--kcds-orange-500);
  padding:36px 40px;
  gap:30px
}
.catalog-kicker {
  font-size:12px;
  font-weight:700;
  letter-spacing:.07em
}
.catalog-intro h3 {
  font-size:48px;
  margin:22px 0 16px;
  line-height:1.05
}
.catalog-intro p {
  font-size:16px;
  color:var(--kcds-site-catalog-intro-color-2);
  max-width:460px;
  margin-bottom:24px
}
.catalog-start {
  display:flex;
  align-items:center;
  gap:20px;
  font-weight:700;
  font-size:16px
}
.catalog-mark {
  align-self:stretch;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:24px;
  border-radius:50% 50% 28px 28px;
  background:var(--kcds-site-catalog-mark-background-2);
  min-height:245px
}
.catalog-mark img {
  width:110px
}
.catalog-mark span {
  font-size:14px;
  font-weight:700;
  color:var(--kcds-site-catalog-mark-color-2)
}
.catalog-card {
  padding:28px;
  display:flex;
  flex-direction:column;
  min-width:0
}
.catalog-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px
}
.catalog-heading h3 {
  font-size:25px;
  margin:0;
  letter-spacing:-.025em
}
.catalog-arrow {
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  background:var(--kcds-site-material-background-90);
  border-radius:50%
}
.catalog-arrow svg {
  width:19px;
  height:19px
}
.catalog-card>p {
  font-size:15px;
  line-height:1.5;
  color:var(--kcds-site-catalog-card-color-2);
  margin:10px 0 25px
}
.catalog-color {
  background:var(--kcds-site-catalog-color-background-2)
}
.catalog-type {
  background:var(--kcds-site-catalog-type-background-2)
}
.catalog-ai {
  background:var(--kcds-site-catalog-ai-background-2)
}
.catalog-access {
  background:var(--kcds-site-catalog-access-background-2)
}
.catalog-tokens {
  background:var(--kcds-site-catalog-tokens-background-2)
}
.catalog-icons {
  background:var(--kcds-site-catalog-icons-background-2)
}
.catalog-swatches {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin-top:auto
}
.catalog-swatches>div {
  min-width:0
}
.catalog-swatches span {
  height:108px;
  border-radius:16px;
  display:block;
  margin-bottom:12px
}
.catalog-swatches b {
  font-size:14px;
  display:block
}
.catalog-swatches small {
  display:block;
  font-size:11px;
  margin-top:6px;
  color:var(--kcds-site-catalog-swatches-color-2);
  font-family:monospace
}
.catalog-specimen {
  display:flex;
  align-items:center;
  gap:25px;
  margin:auto 0
}
.catalog-specimen>strong {
  font-size:110px;
  font-weight:400;
  letter-spacing:-.08em;
  line-height:1
}
.catalog-specimen>div {
  display:flex;
  flex-direction:column;
  gap:12px
}
.catalog-specimen b {
  font-size:26px;
  line-height:1.1
}
.catalog-specimen span {
  font-size:13px
}
.catalog-specimen small {
  font-size:10px;
  line-height:1.7;
  letter-spacing:.02em;
  color:var(--kcds-site-catalog-specimen-color-2)
}
.catalog-chat {
  background:var(--kcds-site-catalog-chat-background-2);
  padding:23px;
  border-radius:20px;
  margin-top:auto
}
.catalog-chat>span {
  display:flex;
  align-items:center;
  gap:9px;
  color:var(--kcds-site-catalog-chat-color-3);
  font-size:13px;
  font-weight:700
}
.catalog-chat p {
  font-size:19px;
  color:var(--kcds-site-catalog-chat-color-4);
  line-height:1.35;
  margin:17px 0
}
.catalog-chat>div {
  display:flex;
  gap:14px;
  align-items:center;
  font-size:12px
}
.catalog-chat b {
  background:var(--kcds-periwinkle-500);
  color:white;
  padding:12px;
  border-radius:10px
}
.catalog-chat div>span {
  display:flex;
  align-items:center;
  gap:5px
}
.catalog-chat svg {
  width:18px;
  height:18px
}
.catalog-controls {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px 14px;
  margin:auto 0
}
.catalog-controls>div>span {
  font-size:12px;
  color:var(--kcds-site-catalog-controls-color-3);
  display:block;
  margin-bottom:13px
}
.catalog-controls b {
  background:var(--kcds-site-catalog-controls-background-2);
  color:white;
  padding:15px 17px;
  border-radius:12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:14px
}
.catalog-controls>div:nth-child(2)>b {
  outline:2px solid var(--kcds-site-catalog-controls-background-2);
  outline-offset:4px
}
.catalog-controls svg {
  width:19px;
  height:19px
}
.catalog-controls small {
  grid-column:1/-1;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:var(--kcds-site-catalog-controls-color-4)
}
.catalog-token-demo {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin:auto 0;
  align-items:center
}
.catalog-token-demo>div:first-child {
  display:flex;
  flex-direction:column;
  gap:16px
}
.catalog-token-demo>div>span {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:11px
}
.catalog-token-demo>div>span>b {
  margin-left:auto;
  font-size:11px;
  color:var(--kcds-site-catalog-token-demo-color-2)
}
.catalog-token-demo i,
.catalog-token-demo svg {
  width:14px;
  height:14px;
  border-radius:4px
}
.catalog-token-preview {
  background:white;
  padding:20px 15px;
  border-radius:18px;
  display:flex;
  flex-direction:column;
  gap:16px
}
.catalog-token-preview small {
  font-size:8px;
  letter-spacing:.08em;
  color:var(--kcds-site-catalog-token-preview-color-2)
}
.catalog-token-preview>b {
  background:var(--kcds-vermilion-500);
  color:white;
  padding:14px 10px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:7px;
  font-size:11px
}
.catalog-token-preview>span {
  color:var(--kcds-site-catalog-token-preview-color-2);
  font-size:10px
}
.catalog-icon-grid {
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:12px;
  margin:auto 0
}
.catalog-icon-grid>span {
  display:grid;
  place-items:center;
  aspect-ratio:1;
  background:var(--kcds-site-catalog-icon-grid-background-2);
  border-radius:14px
}
.catalog-icon-grid svg {
  width:24px;
  height:24px;
  stroke-width:1.75
}
@media(max-width:1000px) {
.catalog-token-demo {
  grid-template-columns:1fr
}
.catalog-token-preview {
  display:none
}
.catalog-specimen {
  gap:15px
}
.catalog-specimen>strong {
  font-size:85px
}
.catalog-specimen b {
  font-size:21px
}
.catalog-card {
  padding:24px
}
.catalog-icon-grid {
  gap:8px
}
}
@media(max-width:760px) {
.system-catalog {
  grid-template-columns:1fr;
  gap:14px
}
.catalog-intro {
  grid-template-columns:1fr;
  padding:28px;
  gap:25px
}
.catalog-intro h3 {
  font-size:40px
}
.catalog-mark {
  min-height:160px;
  border-radius:24px;
  gap:12px
}
.catalog-mark img {
  width:65px
}
.catalog-card {
  padding:24px
}
.catalog-heading h3 {
  font-size:23px
}
.catalog-card>p {
  font-size:14px
}
.catalog-swatches {
  gap:8px
}
.catalog-swatches span {
  height:90px
}
.catalog-swatches small {
  font-size:9px
}
.catalog-controls b {
  padding:13px 10px;
  font-size:12px
}
.catalog-token-demo {
  grid-template-columns:1fr
}
.catalog-token-preview {
  display:flex
}
.catalog-icon-grid {
  gap:8px
}
.catalog-icon-grid svg {
  width:22px;
  height:22px
}
}
.material .m-hero-art {
  height:510px;
  aspect-ratio:auto;
  max-height:none
}
.material .m-suite-scene .m-demo-card {
  transform:translateX(clamp(-225px,-13vw,-95px)) rotate(3deg)
}
@media(max-width:1100px) {
.material .m-suite-scene .m-demo-card {
  transform:translateX(-25px) rotate(3deg)
}
}
@media(max-width:760px) {
.material .m-hero-art {
  height:360px;
  aspect-ratio:auto
}
.material .m-suite-scene .m-demo-card {
  transform:rotate(3deg)
}
}
.catalog-mark img {
  filter:none
}
.material .site-footer {
  position:relative;
  margin:28px 28px 90px
}
.material .site-footer::before {
  content:"";
  position:absolute;
  left:44px;
  top:0;
  width:160px;
  height:5px;
  border-radius:0 0 5px 5px;
  background:linear-gradient(to right,var(--kcds-vermilion-500) 25%,var(--kcds-blue-500) 25% 50%,var(--kcds-emerald-500) 50% 75%,var(--kcds-periwinkle-500) 75%)
}
.site-footer .wordmark {
  margin-bottom:7px
}
.site-footer .wordmark .official-wordmark {
  width:175px;
  height:auto
}
.site-footer .wordmark .design-word {
  font-size:26px
}
.material .site-footer>div {
  gap:13px
}
.material .site-footer>div>span {
  color:var(--kcds-site-material-color-90);
  margin-bottom:10px
}
.material .site-footer>div>a:not(.wordmark) {
  font-size:15px;
  line-height:1.5;
  color:var(--kcds-site-material-color-91);
  text-underline-offset:5px;
  transition:color .2s
}
.site-footer>div>a:not(.wordmark):hover {
  color:var(--kcds-site-site-footer-color-2);
  text-decoration:underline
}
.material .site-footer>div>p {
  color:var(--kcds-site-material-color-92);
  margin:6px 0 0
}
.material .site-footer .footer-bottom {
  margin:8px 0 0;
  padding:24px 0 0;
  border-top:1px solid var(--kcds-site-material-border-top-6);
  align-items:center;
  gap:15px;
  color:var(--kcds-site-material-color-93);
  font-size:12px
}
.material .site-footer .footer-credit {
  grid-column:1/-1;
  border:0;
  margin:-14px 0 0;
  padding:0;
  font-size:14px;
  line-height:1.6;
  color:var(--kcds-site-material-color-94);
  letter-spacing:0
}
.site-footer .footer-credit strong {
  color:var(--kcds-site-material-color-90);
  font-weight:700
}
.dark .material .site-footer {
  color:var(--kcds-site-dark-color-78)
}
.dark .site-footer>div>span,
.dark .site-footer .footer-credit strong {
  color:var(--kcds-site-dark-color-78)
}
.dark .material .site-footer>div>a:not(.wordmark),
.dark .material .site-footer>div>p,
.dark .site-footer .footer-credit {
  color:var(--kcds-site-dark-color-79)
}
.dark .site-footer .footer-bottom {
  border-color:var(--kcds-site-dark-border-color-18);
  color:var(--kcds-site-dark-color-80)
}
@media(max-width:1000px) {
.material .site-footer {
  padding:36px 30px
}
}
@media(max-width:760px) {
.material .site-footer {
  margin:20px 12px 88px;
  border-radius:25px;
  grid-template-columns:1fr 1fr
}
.site-footer .wordmark .official-wordmark {
  width:145px
}
.site-footer .wordmark .design-word {
  font-size:22px
}
.material .site-footer .footer-bottom {
  align-items:flex-start;
  font-size:11px;
  gap:6px
}
.material .site-footer .footer-credit {
  font-size:12px;
  margin:-10px 0 0
}
.material .site-footer::before {
  left:22px;
  width:120px
}
}
.material .m-shape-art,
.material .m-shape-art span,
.material .m-color-art span,
.material .m-type-art>b,
.material .m-type-art>span {
  animation:none;
  translate:none;
  rotate:none;
  scale:none
}
.material .m-shape-art {
  gap:15px;
  position:relative;
  padding-bottom:25px
}
.material .m-shape-art::after {
  content:'Corner radius · px';
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  text-align:center;
  font-size:12px;
  color:var(--kcds-site-material-color-95)
}
.material .m-shape-art span {
  height:116px;
  width:90px;
  transition:none;
  font-variant-numeric:tabular-nums
}
.material .m-type-art {
  position:relative
}
.material .m-type-art>span {
  font-size:17px;
  line-height:1.5
}
.material .m-color-art span {
  transition:background-color 1.2s ease;
  transform:none;
  border-radius:18px;
  height:130px
}
.material .m-color-art {
  gap:10px
}
.material .m-color-art span {
  margin:0
}
@media(max-width:760px) {
.material .m-shape-art span {
  width:62px;
  height:100px
}
.material .m-type-art>span {
  font-size:14px
}
.material .m-color-art {
  gap:7px
}
}
.material .m-rail {
  padding-top:18px;
  padding-bottom:18px
}
.material .m-search,
.material .rail-bottom button {
  width:64px;
  height:52px;
  border:0;
  border-radius:16px;
  background:transparent;
  color:inherit;
  box-shadow:none;
  display:grid;
  place-items:center
}
.material .m-search {
  margin-top:4px;
  margin-bottom:12px
}
.material .m-search svg,
.material .rail-bottom button svg,
.material .m-rail nav a>svg {
  width:23px;
  height:23px;
  stroke-width:1.75
}
.material .m-rail nav {
  padding:0 8px;
  gap:6px
}
.material .m-rail nav a {
  border:0;
  border-radius:16px;
  padding:11px 2px;
  min-height:66px;
  font-size:11px;
  font-weight:500;
  gap:7px
}
.material .m-rail nav a[aria-current=page] {
  background:var(--kcds-site-material-background-152);
  border:0;
  color:var(--kcds-site-material-color-64);
  font-weight:700
}
.material .m-search:hover,
.material .rail-bottom button:hover,
.material .m-rail nav a:hover {
  background:var(--kcds-site-material-background-153);
  border:0
}
.dark .material .m-search,
.dark .material .rail-bottom button {
  background:transparent;
  border:0;
  color:var(--kcds-site-dark-color-44)
}
.dark .material .m-rail nav a[aria-current=page] {
  background:var(--kcds-site-dark-background-95);
  border:0;
  color:var(--kcds-site-dark-color-77)
}
.dark .material .m-search:hover,
.dark .material .rail-bottom button:hover,
.dark .material .m-rail nav a:hover {
  background:var(--kcds-site-dark-background-96)
}
@media(max-width:760px) {
.material .m-search,
.material .rail-bottom button {
  width:56px;
  height:48px;
  border-radius:14px
}
.material .m-rail nav {
  padding:0 5px
}
.material .m-rail nav a {
  min-height:62px;
  font-size:10px;
  border-radius:14px
}
}
body .ds-sidebar .ds-home,
body .ds-sidebar .ds-home[aria-current=page] {
  background:transparent;
  color:var(--kcds-color-text-primary);
  border:0;
  box-shadow:none;
  border-radius:0;
  padding:4px 8px 18px
}
body .ds-sidebar .ds-home>span {
  background:color-mix(in srgb,var(--kcds-color-text-primary) 7%,transparent);
  color:var(--kcds-color-text-secondary);
  border:0;
  border-radius:7px;
  padding:4px 7px;
  font-size:11px
}
body .ds-card .ds-generated-art {
  height:210px;
  display:block;
  padding:0;
  background:var(--kcds-site-ds-card-background-2)
}
body .ds-card .ds-generated-art>img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transition:transform .5s ease
}
body .ds-card:hover .ds-generated-art>img {
  transform:scale(1.035)
}
body[data-kcds-theme=dark] .ds-generated-art>img {
  filter:brightness(.8)
}
body #ds-catalog>h1 {
  font-size:clamp(36px,4vw,54px);
  line-height:1.12;
  margin:12px 0 16px;
  letter-spacing:-.045em
}
body #ds-catalog>.ds-lede {
  font-size:18px;
  max-width:700px;
  line-height:1.65
}
body .ds-catalog-search {
  background:white;
  border:1px solid var(--kcds-site-ds-catalog-search-border-2);
  box-shadow:0 4px 16px var(--kcds-site-ds-catalog-search-box-shadow-2);
  min-height:66px;
  border-radius:18px;
  padding:18px 22px;
  margin:30px 0 16px;
  color:var(--kcds-site-ds-catalog-search-color-5)
}
body .ds-catalog-search input {
  font-size:17px;
  line-height:1.5
}
body .ds-catalog-search input::placeholder {
  color:var(--kcds-site-ds-catalog-search-color-6)
}
body .ds-catalog-filters {
  background:var(--kcds-color-surface-default);
  padding:7px;
  border-radius:18px;
  gap:6px;
  width:fit-content;
  max-width:100%;
  margin-bottom:36px
}
body .ds-catalog-filters button {
  font-size:15px;
  font-weight:700;
  min-height:46px;
  padding:12px 20px;
  border:0;
  border-radius:12px;
  background:transparent;
  color:var(--kcds-color-text-primary)
}
body .ds-catalog-filters button[aria-pressed=true] {
  background:var(--kcds-site-ds-catalog-filters-background-7);
  color:white;
  border:0;
  box-shadow:0 2px 5px var(--kcds-site-ds-catalog-filters-box-shadow-2)
}
body .ds-catalog-filters button:hover:not([aria-pressed=true]) {
  background:var(--kcds-site-ds-catalog-filters-background-8)
}
body .ds-catalog-group {
  margin-top:34px;
  padding-top:26px;
  border-top:1px solid var(--kcds-color-border-subtle)
}
body .ds-catalog-group h2 {
  font-size:25px;
  font-weight:700;
  margin-bottom:20px
}
body .ds-catalog-group>div {
  gap:12px;
  grid-template-columns:repeat(2,minmax(0,1fr))
}
body .ds-catalog-group a {
  min-height:76px;
  font-size:17px;
  font-weight:500;
  padding:22px 24px;
  border-radius:18px;
  background:var(--kcds-color-surface-default);
  border:1px solid transparent;
  transition:border-color .2s,background .2s
}
body .ds-catalog-group a:hover {
  background:var(--kcds-color-surface-canvas);
  border-color:var(--kcds-site-ds-catalog-group-border-color-2)
}
body .ds-catalog-group svg {
  width:20px;
  height:20px
}
body[data-kcds-theme=dark] .ds-catalog-search {
  background:var(--kcds-site-ds-catalog-search-background-2);
  border-color:var(--kcds-site-ds-catalog-search-border-color-2);
  color:var(--kcds-site-ds-catalog-search-color-7);
  box-shadow:none
}
body[data-kcds-theme=dark] .ds-catalog-search input::placeholder {
  color:var(--kcds-site-ds-catalog-search-color-8)
}
body[data-kcds-theme=dark] .ds-catalog-filters button[aria-pressed=true] {
  background:var(--kcds-site-ds-catalog-filters-background-9);
  color:var(--kcds-site-ds-catalog-filters-color)
}
body[data-kcds-theme=dark] .ds-catalog-filters button:hover:not([aria-pressed=true]) {
  background:var(--kcds-site-ds-catalog-filters-background-10)
}
@media(max-width:760px) {
body .ds-card .ds-generated-art {
  height:180px
}
body .ds-catalog-search {
  padding:16px;
  min-height:60px
}
body .ds-catalog-search input {
  font-size:16px
}
body .ds-catalog-filters {
  width:100%;
  display:grid;
  grid-template-columns:1fr 1fr
}
body .ds-catalog-filters button {
  font-size:14px;
  padding:12px 8px
}
body .ds-catalog-group>div {
  grid-template-columns:1fr
}
body .ds-catalog-group a {
  font-size:16px;
  min-height:66px;
  padding:18px 20px
}
}
@media(max-width:760px) {
}
@media(max-width:1100px) {
}
@media(max-width:760px) {
}
@media(max-width:760px) {
}
body .ds-system-facts {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  padding:0;
  margin:20px 0 48px;
  border:0
}
body .ds-system-facts>a {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  padding:24px;
  border-radius:20px;
  background:var(--kcds-color-surface-default);
  text-decoration:none;
  color:var(--kcds-color-text-primary);
  min-width:0;
  transition:background .2s,transform .2s
}
body .ds-system-facts>a:hover {
  transform:translateY(-3px);
  background:color-mix(in srgb,var(--kcds-color-surface-default) 88%,var(--kcds-site-ds-system-facts-background-2))
}
body .ds-system-facts>a>b {
  font-size:38px;
  font-weight:700;
  letter-spacing:-.045em;
  line-height:1.15;
  color:var(--kcds-color-text-primary)
}
body .ds-system-facts>a>b svg {
  width:38px;
  height:38px;
  stroke-width:1.5
}
body .ds-system-facts>a>span {
  font-size:16px;
  font-weight:700;
  line-height:1.4;
  color:var(--kcds-color-text-primary)
}
body .ds-system-facts>a>small {
  font-size:13px;
  line-height:1.5;
  color:var(--kcds-color-text-secondary)
}
@media(max-width:1100px) {
body .ds-system-facts {
  grid-template-columns:repeat(2,minmax(0,1fr))
}
}
@media(max-width:600px) {
body .ds-system-facts {
  gap:10px;
  margin-bottom:34px
}
body .ds-system-facts>a {
  padding:18px 15px;
  border-radius:16px
}
body .ds-system-facts>a>b {
  font-size:32px
}
body .ds-system-facts>a>span {
  font-size:15px
}
body .ds-system-facts>a>small {
  font-size:12px
}
}
body .ds-preview-settings select {
  appearance:none;
  -webkit-appearance:none;
  box-sizing:border-box;
  min-height:38px;
  padding:9px 38px 9px 15px;
  line-height:1.4;
  min-width:112px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235d554e' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 13px center;
  background-size:16px
}
body .ds-preview-settings #doc-density {
  min-width:145px
}
body[data-kcds-theme=dark] .ds-preview-settings select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23d7dde6' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
}
body.ds-material .ds-preview-settings select,
body.ds-atlas .ds-preview-settings select {
  padding:9px 38px 9px 15px;
  min-height:38px
}
body.ds-material .ds-catalog-filters button[aria-pressed=true] {
  background:var(--kcds-site-ds-catalog-filters-background-7);
  color:var(--kcds-gray-0);
  border:0
}
body.ds-material[data-kcds-theme=dark] .ds-catalog-filters button[aria-pressed=true] {
  background:var(--kcds-site-ds-catalog-filters-background-9);
  color:var(--kcds-site-ds-catalog-filters-color)
}
body.ds-atlas,
body.ds-material {
  font-family:var(--kcds-font-site)
}
body .ds-crumb {
  font:400 14px/1.5 Lato,Arial,sans-serif;
  gap:9px;
  margin-bottom:24px
}
body .ds-crumb>span {
  font-weight:400
}
body .ds-page-context {
  display:none
}
body .ds-crumb [data-copy-page] {
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:7px;
  border:0;
  background:transparent;
  color:var(--kcds-color-text-secondary);
  font:400 14px/1.5 Lato,Arial,sans-serif;
  padding:6px 0 6px 12px
}
body .ds-crumb [data-copy-page] svg {
  width:16px;
  height:16px
}
body .ds-preview-settings {
  margin-bottom:32px
}
body .ds-preview-settings>span,
body .ds-preview-settings label,
body .ds-preview-settings select {
  font-family:var(--kcds-font-site);
  font-size:14px;
  line-height:1.5;
  font-weight:400;
  letter-spacing:0
}
body.ds-atlas .ds-main .doc-h1,
body.ds-material .ds-main .doc-h1 {
  font:700 44px/1.15 Lato,Arial,sans-serif;
  letter-spacing:-.035em;
  margin:0 0 16px
}
body .ds-main .doc-h3 {
  font:700 24px/1.3 Lato,Arial,sans-serif;
  letter-spacing:-.02em;
  margin:36px 0 18px
}
body .ds-main .doc-text,
body .ds-main .doc-section>.doc-text:first-of-type {
  font:400 16px/1.65 Lato,Arial,sans-serif;
  max-width:760px;
  margin-bottom:24px
}
body .ds-main .spec-table,
body .ds-main .spec-table th,
body .ds-main .spec-table td {
  font-family:var(--kcds-font-site);
  font-size:14px;
  line-height:1.5;
  letter-spacing:0;
  text-transform:none
}
body .ds-main .spec-table code {
  font-family:'JetBrains Mono',monospace;
  font-size:13px;
  white-space:nowrap
}
body .ds-main .doc-note,
body .ds-main .doc-rule,
body .ds-main .state-grid__label,
body .ds-on-page,
body .ds-on-page>span {
  font-family:var(--kcds-font-site);
  font-size:14px;
  line-height:1.5;
  letter-spacing:0;
  text-transform:none
}
body .ds-on-page>span {
  font-weight:700
}
@media(max-width:760px) {
body.ds-atlas .ds-main .doc-h1,
body.ds-material .ds-main .doc-h1 {
  font-size:36px
}
body .ds-crumb {
  font-size:14px
}
body .ds-preview-settings>span,
body .ds-preview-settings label,
body .ds-preview-settings select {
  font-size:14px
}
}
body .ds-main .spacing-row {
  display:grid;
  grid-template-columns:190px 64px 1fr;
  align-items:center;
  gap:20px;
  padding:16px 20px
}
body .ds-main .spacing-row__token {
  width:auto;
  font:400 13px/1.5 'JetBrains Mono',monospace;
  white-space:nowrap
}
body .ds-main .spacing-row__value {
  width:auto;
  font:400 14px/1.5 Lato,Arial,sans-serif
}
@media(max-width:600px) {
body .ds-main .spacing-row {
  grid-template-columns:165px 48px 1fr;
  gap:10px;
  padding:14px 12px
}
body .ds-main .spacing-list {
  overflow-x:auto
}
body .ds-main .spacing-row {
  min-width:340px
}
}
html:has(body.material) {
  background:var(--kcds-site-material-background-154)
}
html.dark:has(body.material) {
  background:var(--kcds-site-dark-background-97)
}
.material .m-main {
  display:flow-root
}
.material .site-footer {
  background:transparent;
  border:0;
  border-top:1px solid var(--kcds-color-border-subtle);
  border-radius:0;
  box-shadow:none;
  padding:44px 0 96px;
  margin-top:52px;
  margin-bottom:0;
  gap:36px 60px;
  grid-template-columns:minmax(280px,1.6fr) 1fr 1fr;
  overflow:visible;
  color:var(--kcds-color-text-primary)
}
.material .site-footer {
  width:auto;
  max-width:none;
  margin-inline:35px
}
.material .site-footer::before {
  display:none
}
.dark .material .site-footer {
  background:transparent
}
.material .site-footer>div>span {
  font-size:15px;
  margin:0 0 8px
}
.material .site-footer>div>p {
  max-width:350px;
  font-size:15px;
  line-height:1.6
}
.material .site-footer .footer-signature {
  grid-column:1/-1;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  border-top:1px solid var(--kcds-color-border-subtle);
  padding-top:24px;
  margin-top:4px
}
.material .site-footer .footer-signature>span {
  font-size:14px;
  line-height:1.6;
  color:var(--kcds-color-text-secondary);
  font-weight:400;
  margin:0
}
.footer-signature strong {
  color:var(--kcds-color-text-primary);
  font-weight:700
}
.material .site-footer .footer-signature>a {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:14px;
  white-space:nowrap;
  color:var(--kcds-color-text-primary)
}
.footer-signature svg {
  width:17px;
  height:17px
}
@media(max-width:1000px) {
.material .site-footer {
  grid-template-columns:1fr 1fr;
  gap:28px 40px
}
.site-footer>div:first-child {
  grid-column:1/-1
}
}
@media(max-width:760px) {
.material .site-footer {
  margin-inline:20px
}
.material .site-footer {
  margin-top:36px;
  padding:30px 0 96px;
  gap:28px 20px
}
}
.ds-material .ds-primary-rail {
  position:fixed;
  inset:0 auto 0 0;
  width:var(--primary-rail-width);
  z-index:120;
  background:var(--kcds-site-material-background-98);
  color:var(--kcds-site-material-color-64);
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:18px 8px;
  overflow-y:auto;
  border-right:1px solid var(--kcds-color-border-subtle);
  font-family:var(--kcds-font-site)
}
.ds-primary-rail .m-brand img {
  width:35px;
  height:35px;
  margin-bottom:18px
}
.ds-primary-rail button {
  display:grid;
  place-items:center;
  width:64px;
  height:52px;
  background:transparent;
  border:0;
  border-radius:16px;
  color:inherit;
  cursor:pointer
}
.ds-primary-rail .m-search {
  margin-bottom:12px
}
.ds-primary-rail nav {
  display:flex;
  flex-direction:column;
  gap:6px;
  width:100%
}
.ds-primary-rail nav a {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:66px;
  padding:11px 2px;
  border-radius:16px;
  color:inherit;
  text-decoration:none;
  font-size:11px;
  line-height:1.3;
  font-weight:500;
  text-align:center
}
.ds-primary-rail svg {
  width:23px;
  height:23px;
  stroke-width:1.75
}
.ds-primary-rail nav a[aria-current=page] {
  background:var(--kcds-site-material-background-152);
  font-weight:700
}
.ds-primary-rail nav a:hover,
.ds-primary-rail button:hover {
  background:var(--kcds-site-material-background-153)
}
.ds-primary-rail .rail-bottom {
  margin-top:auto;
  padding-top:24px
}
.ds-material .ds-header {
  margin-left:var(--primary-rail-width);
  height:74px;
  padding:0 28px
}
.ds-material .ds-header nav>a,
.ds-material .ds-header nav>[data-doc-theme] {
  display:none
}
.ds-material .ds-shell {
  margin-left:var(--primary-rail-width);
  grid-template-columns:240px minmax(0,1fr)
}
.ds-material .ds-main {
  padding-inline:32px
}
.ds-material .ds-article-grid {
  grid-template-columns:minmax(0,1fr)
}
.ds-material .ds-on-page {
  display:none
}
.ds-material[data-kcds-theme=dark] .ds-primary-rail {
  background:var(--kcds-site-dark-background-56);
  color:var(--kcds-site-dark-color-44)
}
.ds-material[data-kcds-theme=dark] .ds-primary-rail nav a[aria-current=page] {
  background:var(--kcds-site-dark-background-95);
  color:var(--kcds-site-dark-color-77)
}
.ds-material[data-kcds-theme=dark] .ds-primary-rail nav a:hover,
.ds-material[data-kcds-theme=dark] .ds-primary-rail button:hover {
  background:var(--kcds-site-dark-background-96)
}
@media(max-width:1000px) {
.ds-material .ds-shell {
  grid-template-columns:minmax(0,1fr)
}
.ds-material .ds-sidebar {
  position:fixed;
  left:var(--primary-rail-width);
  width:256px;
  z-index:110;
  transform:translateX(-140%);
  visibility:hidden
}
.ds-material.ds-nav-open .ds-sidebar {
  transform:translateX(0);
  visibility:visible
}
.ds-material .ds-menu-toggle {
  display:grid
}
}
@media(max-width:760px) {
.ds-material .ds-primary-rail {
  padding:18px 5px
}
.ds-primary-rail nav a {
  font-size:10px;
  min-height:62px;
  border-radius:14px
}
.ds-primary-rail button {
  width:56px;
  height:48px
}
.ds-material .ds-header {
  height:65px;
  padding:0 16px
}
.ds-material .ds-header .ds-brand img {
  width:120px
}
.ds-material .ds-header .ds-brand {
  font-size:18px
}
.ds-material .ds-main {
  padding-inline:18px
}
.ds-material .ds-sidebar {
  top:65px;
  height:calc(100dvh - 65px);
  max-width:calc(100vw - 72px)
}
}
@media(min-width:761px) {
}
.wordmark .design-word,
.site-footer .wordmark .design-word {
  font-family:var(--kcds-font-site);
  font-size:20px;
  font-weight:400;
  letter-spacing:-.025em;
  line-height:1
}
.ds-header .ds-brand>span {
  font-family:var(--kcds-font-site);
  font-size:20px;
  font-weight:400;
  letter-spacing:-.025em;
  line-height:1
}
.wordmark,
.ds-brand {
  align-items:center
}
@media(max-width:760px) {
}
@media(min-width:1400px) {
.material .m-suite-scene .m-demo-card {
  transform:translateX(clamp(-350px,-21vw,-285px)) rotate(3deg)
}
}
.material .m-card-art.m-foundation-image {
  height:auto;
  aspect-ratio:1.9;
  display:block;
  overflow:hidden;
  background:var(--kcds-site-material-background-155)
}
.material .m-foundation-image>img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  animation:none;
  transition:transform .6s ease
}
.material .m-card:hover .m-foundation-image>img {
  transform:scale(1.025)
}
.dark .material .m-foundation-image>img {
  filter:brightness(.8) saturate(.9)
}
@media(prefers-reduced-motion:reduce) {
.material .m-foundation-image>img {
  transition:none
}
.material .m-card:hover .m-foundation-image>img {
  transform:none
}
}
.wordmark .design-word,
.site-footer .wordmark .design-word,
.ds-header .ds-brand>span {
  font-family:var(--kcds-font-site);
  font-size:18px;
  font-weight:700;
  letter-spacing:-.035em;
  line-height:1.2
}
.wordmark,
.ds-header .ds-brand {
  gap:8px
}
@media(max-width:760px) {
.wordmark .design-word,
.site-footer .wordmark .design-word,
.ds-header .ds-brand>span {
  font-size:16px
}
.ds-material .ds-header .ds-brand>span {
  font-size:14px
}
}
body .ds-card .ds-generated-art,
.material .m-card-art.m-foundation-image {
  height:auto;
  aspect-ratio:3 / 2
}
body .ds-card .ds-generated-art>img,
.material .m-foundation-image>img {
  object-fit:contain;
  width:100%;
  height:100%;
  transform:none
}
body .ds-card:hover .ds-generated-art>img,
.material .m-card:hover .m-foundation-image>img {
  transform:none
}
.ds-material .ds-nav-title {
  font:700 20px/1.3 Lato,Arial,sans-serif;
  color:var(--kcds-color-text-primary);
  letter-spacing:-.02em;
  margin:0 10px 18px
}
.ds-material .ds-sidebar [hidden] {
  display:none!important
}
.ds-material .ds-sidebar:not([data-area=overview]) .ds-nav-groups {
  border-top:0;
  padding-top:8px;
  margin-top:8px
}
.ds-material .ds-sidebar[data-area=foundations] .ds-nav-group>summary,
.ds-material .ds-sidebar[data-area=products] .ds-nav-group>summary,
.ds-material .ds-sidebar[data-area=ai] .ds-nav-group>summary {
  display:none
}
.ds-material .ds-sidebar[data-area=foundations] .ds-nav-group>div>a,
.ds-material .ds-sidebar[data-area=products] .ds-nav-group>div>a,
.ds-material .ds-sidebar[data-area=ai] .ds-nav-group>div>a {
  padding-left:14px;
  font-size:15px
}
.material .m-ai-banner {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:410px;
  grid-template-columns:1fr 1fr
}
.material .m-ai-banner>div:first-child {
  position:relative;
  z-index:2
}
.material .m-ai-banner .m-ai-generated {
  position:absolute;
  display:block;
  transform:none
}
.dark .material .m-ai-generated>img {
  filter:brightness(.65) saturate(.85)
}
@media(max-width:760px) {
.material .m-ai-banner {
  display:block;
  padding-bottom:0
}
.material .m-ai-banner .m-ai-generated {
  position:relative
}
}
@media(min-width:761px) {
.material .m-suite-scene>img {
  top:44px;
  bottom:0;
  height:calc(100% - 44px);
  object-position:center 20%;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,var(--kcds-site-material-mask-image-2) 30%),linear-gradient(to bottom,transparent 0px,var(--kcds-site-material-mask-image-2) 52px);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0%,var(--kcds-site-material-mask-image-2) 30%),linear-gradient(to bottom,transparent 0px,var(--kcds-site-material-mask-image-2) 52px);
  mask-composite:intersect
}
.material .m-suite-scene:has(img[src$="hire.webp"])>img {
  object-fit:cover;
  object-position:center top;
  mask-image:linear-gradient(to right,transparent 0%,var(--kcds-site-material-mask-image-2) 30%),linear-gradient(to bottom,transparent 0px,var(--kcds-site-material-mask-image-2) 24px)
}
}
.material .entrance-item {
  opacity:0;
  translate:0 28px;
  transition:opacity .7s ease var(--entrance-delay,0ms),translate .85s cubic-bezier(.16,1,.3,1) var(--entrance-delay,0ms)
}
.material .entrance-item.entrance-visible {
  opacity:1;
  translate:0 0
}
.material .m-hero-copy>.entrance-item {
  translate:0 18px
}
.material .m-hero-copy>.entrance-visible {
  translate:0 0
}
.material .m-hero-art.entrance-item {
  transition-duration:1s,1.15s
}
.material .m-product-grid.entrance-item,
.material .site-footer.entrance-item {
  translate:0 16px
}
.material .m-product-grid.entrance-visible,
.material .site-footer.entrance-visible {
  translate:0 0
}
@media(max-width:760px) {
.material .entrance-item {
  translate:0 18px
}
.material .entrance-visible {
  translate:0 0
}
}
@media(prefers-reduced-motion:reduce) {
.material .entrance-item {
  opacity:1!important;
  translate:none!important;
  transition:none!important
}
}
@media print {
.material .entrance-item {
  opacity:1;
  translate:none
}
}
.material .m-ai-banner .m-ai-generated {
  inset:0 0 0 48%;
  padding:22px 28px 22px 0
}
.material .m-ai-generated>img {
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  mask-image:none;
  -webkit-mask-image:none;
  filter:none
}
.material .m-ai-generated>.ai-art-dark {
  display:none
}
.dark .material .m-ai-generated>.ai-art-light {
  display:none
}
.dark .material .m-ai-generated>.ai-art-dark {
  display:block
}
@media(max-width:760px) {
.material .m-ai-banner .m-ai-generated {
  inset:auto;
  height:290px;
  margin:8px -10px 0;
  padding:0
}
.material .m-ai-generated>img {
  mask-image:none;
  -webkit-mask-image:none
}
}
.material .official-product-list {
  display:flex;
  flex-wrap:wrap;
  gap:14px 18px;
  max-width:430px;
  margin:24px 0
}
.official-product-list>span {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  line-height:1.4;
  white-space:nowrap
}
.official-product-list img,
.demo-product-mark {
  object-fit:contain;
  flex-shrink:0;
  width:28px;
  height:28px
}
[data-demo-product] {
  display:flex;
  align-items:center;
  gap:8px
}
.footer-socials {
  grid-column:1/-1;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:0
}
.footer-socials a {
  display:flex;
  align-items:center;
  gap:9px;
  padding:11px 15px;
  border:1px solid var(--kcds-color-border-subtle,var(--kcds-color-border-subtle));
  border-radius:12px;
  font:400 14px/1.3 Lato,Arial,sans-serif;
  color:inherit;
  text-decoration:none;
  transition:background .2s
}
.footer-socials a:hover {
  background:var(--kcds-site-footer-socials-background-2)
}
.footer-socials svg {
  width:18px;
  height:18px;
  fill:currentColor
}
.site-footer .footer-socials {
  grid-row:2
}
.site-footer .footer-signature {
  grid-row:3
}
.ds-footer .footer-socials {
  width:100%;
  flex-basis:100%
}
@media(min-width:761px) {
.material .m-suite-scene>img,
.material .m-suite-scene:has(img[src$="hire.webp"])>img {
  top:0;
  height:100%;
  object-fit:cover;
  object-position:center top;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.35) 15%,var(--kcds-site-material-mask-image-2) 36%),linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.08) 7%,rgba(0,0,0,.32) 17%,rgba(0,0,0,.7) 29%,var(--kcds-site-material-mask-image-2) 43%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.35) 15%,var(--kcds-site-material-mask-image-2) 36%),linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.08) 7%,rgba(0,0,0,.32) 17%,rgba(0,0,0,.7) 29%,var(--kcds-site-material-mask-image-2) 43%);
  mask-composite:intersect
}
.dark .material .m-suite-scene>img,
.dark .material .m-suite-scene:has(img[src$="hire.webp"])>img {
  -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.3) 18%,var(--kcds-site-material-mask-image-2) 40%),linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.06) 9%,rgba(0,0,0,.28) 22%,rgba(0,0,0,.65) 36%,var(--kcds-site-material-mask-image-2) 54%);
  mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.3) 18%,var(--kcds-site-material-mask-image-2) 40%),linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.06) 9%,rgba(0,0,0,.28) 22%,rgba(0,0,0,.65) 36%,var(--kcds-site-material-mask-image-2) 54%)
}
}
.kc-brand-picture {
  display:inline-flex;
  align-items:center;
  flex-shrink:0
}
.kc-brand-picture img {
  filter:none
}
.kc-brand-picture [data-brand-dark] {
  display:none
}
.dark .kc-brand-picture [data-brand-light],
body[data-kcds-theme=dark] .kc-brand-picture [data-brand-light] {
  display:none
}
.dark .kc-brand-picture [data-brand-dark],
body[data-kcds-theme=dark] .kc-brand-picture [data-brand-dark] {
  display:block
}
.material .m-card,
.material .live-studio,
.material .studio-shell,
.material .m-ai-banner,
.material .m-next>div>a,
.material .m-detail-copy>.pill-link,
.material .m-demo-card,
.material .m-demo-card>a {
  border-width:1px;
  border-style:solid;
  border-color:transparent
}
.kc-brand-picture {
  position:relative;
  width:165px;
  height:34px
}
.kc-brand-picture img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain
}
.material .m-ai-banner .ai-chat-demo {
  position:relative;
  z-index:1;
  width:100%;
  min-width:0;
  padding:24px;
  border:1px solid var(--kcds-site-material-border-23);
  border-radius:24px;
  background:var(--kcds-site-material-background-156);
  color:var(--kcds-site-material-color-96);
  box-shadow:0 16px 40px var(--kcds-site-material-box-shadow-32);
  font-size:14px;
  transform:none;
  text-align:left
}
.ai-chat-heading {
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  margin-bottom:22px
}
.ai-chat-heading>span:last-child {
  margin-left:auto;
  font-weight:400;
  font-size:12px;
  opacity:.65
}
.ai-chat-status {
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--kcds-site-ai-chat-status-background-2)
}
.ai-chat-question {
  margin-left:28px;
  padding:12px 16px;
  background:var(--kcds-site-ai-chat-question-background-2);
  border-radius:16px 16px 4px 16px;
  animation:chat-question 10s infinite
}
.ai-chat-answer {
  position:relative;
  margin-top:16px;
  min-height:180px
}
.ai-chat-author {
  font-size:12px;
  font-weight:700;
  margin-bottom:9px;
  color:var(--kcds-site-ai-chat-author-color-2)
}
.ai-chat-response {
  animation:chat-answer 10s infinite
}
.material .ai-chat-response p {
  font-size:14px;
  line-height:1.5;
  margin:0 0 7px;
  color:inherit
}
.ai-chat-suggestion {
  margin-top:12px;
  border:1px solid var(--kcds-site-ai-chat-suggestion-border-2);
  border-radius:12px;
  padding:10px 12px;
  font-weight:700
}
.ai-chat-suggestion span {
  display:block;
  font-weight:400;
  font-size:12px;
  margin-top:3px;
  opacity:.7
}
.ai-chat-note {
  font-size:12px;
  opacity:.65
}
.ai-chat-typing {
  position:absolute;
  top:32px;
  display:flex;
  gap:5px;
  animation:chat-typing 10s infinite
}
.ai-chat-typing i {
  height:6px;
  width:6px;
  background:var(--kcds-site-ai-chat-typing-background-2);
  border-radius:50%;
  animation:chat-dot 1s infinite alternate
}
.ai-chat-typing i:nth-child(2) {
  animation-delay:.2s
}
.ai-chat-typing i:nth-child(3) {
  animation-delay:.4s
}
.dark .material .m-ai-banner .ai-chat-demo {
  background:var(--kcds-site-dark-background-98);
  border-color:var(--kcds-site-dark-border-color-19);
  color:var(--kcds-site-dark-color-81);
  box-shadow:0 16px 40px var(--kcds-site-material-box-shadow-30)
}
.dark .ai-chat-question {
  background:var(--kcds-site-dark-background-99)
}
.dark .ai-chat-author {
  color:var(--kcds-site-dark-color-82)
}
.dark .ai-chat-suggestion {
  border-color:var(--kcds-site-dark-border-color-20)
}
@keyframes chat-question {
0%,5% {
  opacity:0;
  transform:translateY(8px)
}
12%,94% {
  opacity:1;
  transform:none
}
100% {
  opacity:0;
  transform:none
}
}
@keyframes chat-answer {
0%,32% {
  opacity:0;
  transform:translateY(6px)
}
42%,94% {
  opacity:1;
  transform:none
}
100% {
  opacity:0;
  transform:none
}
}
@keyframes chat-typing {
0%,12% {
  opacity:0
}
18%,30% {
  opacity:1
}
35%,100% {
  opacity:0
}
}
@keyframes chat-dot {
to {
  transform:translateY(-4px);
  opacity:.4
}
}
@media(max-width:760px) {
.material .m-ai-banner .ai-chat-demo {
  margin:28px 0 24px;
  padding:20px
}
.ai-chat-question {
  margin-left:12px
}
}
@media(prefers-reduced-motion:reduce) {
.ai-chat-question,
.ai-chat-response {
  animation:none
}
.ai-chat-typing {
  display:none
}
}
@media(min-width:761px) {
.material .m-suite-scene:has(img[src$="hire.webp"])>img,

.dark .material .m-suite-scene:has(img[src$="hire.webp"])>img {
  top:76px;
  height:calc(100% - 76px);
  object-fit:cover;
  object-position:center top;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.4) 14%,var(--kcds-site-material-mask-image-2) 32%),linear-gradient(to bottom,transparent 0px,rgba(0,0,0,.65) 12px,var(--kcds-site-material-mask-image-2) 26px);
  mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.4) 14%,var(--kcds-site-material-mask-image-2) 32%),linear-gradient(to bottom,transparent 0px,rgba(0,0,0,.65) 12px,var(--kcds-site-material-mask-image-2) 26px);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}
}
.dark .material .company-story,
.dark .material .m-next {
  background:var(--kcds-site-dark-background-100);
  color:var(--kcds-site-dark-color-83)
}
.dark .material .company-facts article,
.dark .material .company-facts article:nth-child(2),
.dark .material .company-facts article:nth-child(3) {
  background:var(--kcds-site-dark-background-101);
  box-shadow:inset 0 0 0 1px var(--kcds-site-dark-box-shadow-4)
}
.dark .material .company-facts article>b {
  color:var(--kcds-site-dark-color-83)
}
.dark .material .company-story p,
.dark .material .company-facts article>span {
  color:var(--kcds-site-dark-color-84)
}
.dark .material .company-facts small {
  color:var(--kcds-site-dark-color-85)
}
.dark .material .m-next>div>a {
  background:var(--kcds-site-dark-background-102);
  border-color:var(--kcds-site-dark-border-color-21);
  color:var(--kcds-site-dark-color-86)
}
.dark .material .m-next>div>a:hover {
  background:var(--kcds-site-dark-background-103);
  border-color:var(--kcds-site-dark-border-color-22)
}
.dark .material .m-next>div>a svg,
.dark .material .company-story a svg {
  color:var(--kcds-site-dark-color-87)
}
.ds-material .ds-shell {
  align-items:start;
  min-height:100dvh
}
.ds-material .ds-main {
  align-self:start;
  margin:0 auto;
  padding-top:32px
}
.ds-material .ds-sidebar {
  top:0;
  height:100dvh
}
.ds-material .ds-section-toggle {
  display:none
}
@media(max-width:1000px) {
.ds-material .ds-section-toggle {
  display:flex;
  position:relative;
  margin:16px 18px 0 calc(var(--primary-rail-width) + 18px);
  align-items:center;
  gap:8px;
  padding:10px 14px;
  background:var(--kcds-color-surface-default);
  color:var(--kcds-color-text-primary);
  border:1px solid var(--kcds-color-border-subtle);
  border-radius:12px;
  z-index:120
}
.ds-material .ds-main {
  padding-top:24px
}
.ds-material .ds-sidebar {
  top:0;
  height:100dvh;
  padding-top:76px
}
}
.ds-filter kbd {
  display:none
}
body[data-kcds-theme=dark] .ds-sidebar a[aria-current=page] {
  background:var(--kcds-site-ds-sidebar-background-8);
  color:var(--kcds-site-dark-color-77)
}
body[data-kcds-theme=dark] .ds-sidebar a:hover {
  background:var(--kcds-site-ds-sidebar-background-9);
  color:var(--kcds-site-dark-color-77)
}
body[data-kcds-theme=dark] .ds-sidebar a[aria-current=page]:hover {
  background:var(--kcds-site-ds-sidebar-background-10)
}
.dark .material .m-search,
.dark .material .m-rail nav a[aria-current=page]>svg {
  background:var(--kcds-site-ds-sidebar-background-8);
  color:var(--kcds-site-dark-color-77)
}
@media(min-width:761px) {
.material .m-suite-scene:has(img[src$="hire.webp"])::before {
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:180px;
  pointer-events:none;
  background:linear-gradient(to bottom,transparent 0%,rgba(174,157,220,.04) 10%,rgba(174,157,220,.16) 27%,rgba(174,157,220,.38) 47%,rgba(174,157,220,.67) 70%,var(--kcds-site-material-background-157) 100%);
  mask-image:linear-gradient(to right,transparent,var(--kcds-site-material-mask-image-2) 40%);
  -webkit-mask-image:linear-gradient(to right,transparent,var(--kcds-site-material-mask-image-2) 40%)
}
.material .m-suite-scene:has(img[src$="hire.webp"])>img,
.dark .material .m-suite-scene:has(img[src$="hire.webp"])>img {
  -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.4) 14%,var(--kcds-site-material-mask-image-2) 32%),linear-gradient(to bottom,transparent 0px,rgba(0,0,0,.15) 8px,rgba(0,0,0,.5) 18px,rgba(0,0,0,.85) 30px,var(--kcds-site-material-mask-image-2) 42px);
  mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.4) 14%,var(--kcds-site-material-mask-image-2) 32%),linear-gradient(to bottom,transparent 0px,rgba(0,0,0,.15) 8px,rgba(0,0,0,.5) 18px,rgba(0,0,0,.85) 30px,var(--kcds-site-material-mask-image-2) 42px)
}
.dark .material .m-suite-scene:has(img[src$="hire.webp"])::before {
  background:linear-gradient(to bottom,transparent 0%,rgba(136,123,172,.04) 10%,rgba(136,123,172,.16) 27%,rgba(136,123,172,.38) 47%,rgba(136,123,172,.67) 70%,var(--kcds-site-dark-background-104) 100%)
}
}
.system-news .m-section-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:24px;
  margin-bottom:30px
}
.system-news .m-section-heading h2 {
  font-size:clamp(32px,3.7vw,54px);
  font-weight:400;
  margin:0
}
.system-news .m-section-heading p {
  font-size:16px;
  margin:0
}
.news-feature {
  position:relative;
  display:grid;
  grid-template-columns:1.5fr 1fr;
  min-height:360px;
  padding:8px;
  border-radius:30px;
  overflow:hidden;
  background:var(--kcds-site-news-feature-background-3);
  text-decoration:none
}
.news-feature>img {
  position:absolute;
  inset:0
}
.news-feature-copy {
  position:relative;
  grid-column:2;
  background:var(--kcds-site-news-feature-copy-background-2);
  color:var(--kcds-site-news-feature-copy-color-2);
  border-radius:25px;
  padding:32px;
  display:flex;
  flex-direction:column;
  align-items:start;
  justify-content:center
}
.news-kind {
  font-size:12px;
  font-weight:700;
  line-height:1.4;
  color:var(--kcds-site-news-kind-color-2);
  display:block;
  margin-bottom:14px
}
.news-feature .news-kind {
  color:var(--kcds-site-news-feature-color-3)
}
.news-feature h3 {
  font-size:clamp(26px,2.6vw,40px);
  font-weight:500;
  line-height:1.12;
  margin:0 0 18px
}
.news-feature p {
  font-size:15px;
  line-height:1.6;
  color:var(--kcds-site-news-feature-color-4);
  margin:0 0 24px
}
.news-read {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:14px;
  font-weight:700
}
.news-read svg {
  width:18px;
  height:18px
}
.news-feature .news-read {
  color:var(--kcds-site-news-feature-color-3)
}
.news-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  margin-top:22px
}
.news-item {
  display:grid;
  grid-template-columns:120px minmax(0,1fr);
  align-items:center;
  gap:20px;
  padding:16px;
  border-radius:22px;
  background:var(--kcds-site-news-item-background-5);
  text-decoration:none;
  transition:transform .2s,background .2s
}
.news-item>img {
  width:120px;
  height:132px;
  border-radius:15px
}
.news-item .news-kind {
  margin-bottom:8px
}
.news-item h3 {
  font-size:20px;
  line-height:1.25;
  font-weight:500;
  letter-spacing:-.02em;
  margin:0 0 16px
}
.news-item .news-read {
  font-size:12px
}
.news-item:hover {
  transform:translateY(-3px);
  background:var(--kcds-site-news-item-background-6)
}
.news-feature:hover .news-read {
  text-decoration:underline;
  text-underline-offset:5px
}
.dark .news-item {
  background:var(--kcds-site-dark-background-105);
  color:var(--kcds-site-dark-color-50)
}
.dark .news-item:hover {
  background:var(--kcds-site-dark-background-106)
}
.dark .news-item .news-kind {
  color:var(--kcds-site-news-feature-color-3)
}
@media(max-width:1200px) {
.news-item {
  grid-template-columns:1fr;
  gap:16px
}
.news-item>img {
  width:100%;
  height:160px;
  object-fit:contain;
  background:var(--kcds-site-news-item-background-7)
}
}
@media(max-width:760px) {
.system-news .m-section-heading {
  display:block
}
.system-news .m-section-heading p {
  margin-top:16px
}
.news-feature {
  grid-template-columns:1fr;
  padding-top:210px
}
.news-feature-copy {
  grid-column:1;
  padding:26px
}
.news-grid {
  grid-template-columns:1fr;
  gap:12px
}
.news-item {
  grid-template-columns:95px minmax(0,1fr);
  gap:16px
}
.news-item>img {
  width:95px;
  height:120px;
  object-fit:contain
}
.news-item h3 {
  font-size:18px
}
}
@media(prefers-reduced-motion:reduce) {
.news-item {
  transition:none
}
.news-item:hover {
  transform:none
}
}
.material .foundation-deck {
  display:grid;
  align-items:center;
  padding-block:45px
}
.foundation-deck-copy h2 {
  font-size:clamp(34px,3.6vw,54px);
  font-weight:400;
  margin:0 0 25px
}
.foundation-deck-copy>p {
  max-width:400px;
  font-size:17px
}
.foundation-deck-tabs {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:28px 0
}
.foundation-deck-tabs button {
  padding:11px 16px;
  border:1px solid var(--kcds-color-border-subtle);
  border-radius:24px;
  background:transparent;
  color:inherit;
  font-size:14px
}
.foundation-deck-tabs button[aria-pressed=true] {
  background:var(--kcds-color-text-primary);
  color:var(--kcds-color-surface-canvas);
  border-color:var(--kcds-color-text-primary)
}
.foundation-deck-stage {
  position:relative;
  isolation:isolate
}
.foundation-deck-card {
  position:absolute;
  grid-template-rows:minmax(0,1fr) auto;
  background:var(--kcds-site-foundation-deck-card-background-4);
  border:1px solid var(--kcds-site-foundation-deck-card-border-2);
  overflow:hidden;
  text-decoration:none;
  box-shadow:0 18px 35px var(--kcds-site-material-box-shadow-30)
}
.foundation-deck-card>img {
  min-height:0
}
.foundation-deck-card h3 {
  font-size:23px;
  font-weight:500;
  margin:5px 0 7px
}
.foundation-deck-card p {
  font-size:13px;
  line-height:1.45;
  margin:0
}
.dark .foundation-deck-card {
  background:var(--kcds-site-dark-background-107);
  border-color:var(--kcds-site-dark-border-color-23)
}
@media(max-width:1000px) {
.foundation-deck-card h3 {
  font-size:20px
}
}
@media(max-width:760px) {
.material .foundation-deck {
  gap:12px;
  padding-block:20px
}
.foundation-deck-copy>p {
  max-width:100%
}
.foundation-deck-tabs {
  margin:20px 0
}
.foundation-deck-tabs button {
  padding:10px 13px
}
}
@media(prefers-reduced-motion:reduce) {
}
.material .m-ai-banner .ai-chat-demo {
  height:420px;
  display:flex;
  flex-direction:column
}
.ai-chat-demo .ai-chat-question,
.ai-chat-demo .ai-chat-response,
.ai-chat-demo .ai-chat-typing {
  animation:none;
  transform:none
}
.ai-chat-demo .ai-chat-question {
  min-height:44px;
  flex-shrink:0
}
.ai-chat-demo .ai-chat-answer {
  flex:1;
  min-height:190px;
  margin-top:15px
}
.ai-chat-demo .ai-chat-response {
  opacity:1
}
.ai-chat-demo .ai-chat-typing {
  opacity:0;
  top:30px
}
.ai-chat-demo[data-phase=thinking] .ai-chat-typing {
  opacity:1
}
.ai-chat-demo[data-phase=writing] .ai-chat-author,
.ai-chat-demo[data-phase=sending] .ai-chat-author {
  visibility:hidden
}
.ai-chat-composer {
  min-height:44px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:9px 10px 9px 14px;
  border:1px solid var(--kcds-site-ai-chat-composer-border-2);
  border-radius:14px;
  margin:10px 0;
  background:var(--kcds-site-ai-chat-composer-background-2);
  font-size:13px
}
.ai-compose-text {
  flex:1;
  min-width:0
}
.ai-compose-text:empty:before {
  content:'Ask a question…';
  opacity:.5
}
.ai-chat-demo[data-phase=writing] .ai-compose-text:after {
  content:'│';
  animation:compose-caret .8s steps(1) infinite
}
.ai-send-icon {
  display:grid;
  place-items:center;
  width:26px;
  height:26px;
  border-radius:50%;
  background:var(--kcds-site-ai-send-icon-background-2);
  color:white;
  font-size:20px;
  flex-shrink:0;
  transition:transform .2s,background .2s
}
.ai-chat-demo[data-phase=sending] .ai-send-icon {
  transform:scale(.85);
  background:var(--kcds-site-ai-chat-demo-background-2)
}
.dark .ai-chat-composer {
  background:var(--kcds-site-dark-background-108);
  border-color:var(--kcds-site-dark-border-color-20)
}
@keyframes compose-caret {
50% {
  opacity:0
}
}
@media(max-width:760px) {
.material .m-ai-banner .ai-chat-demo {
  height:480px
}
.ai-chat-demo .ai-chat-answer {
  min-height:220px
}
}
@media(prefers-reduced-motion:reduce) {
.ai-chat-demo .ai-compose-text:after {
  animation:none
}
.ai-chat-demo .ai-send-icon {
  transition:none
}
}
.material .foundation-deck {
  gap:48px;
  grid-template-columns:.9fr 1.3fr
}
.foundation-deck-stage {
  margin:15px 22px 25px 0;
  perspective:1200px
}
.foundation-deck-card {
  inset:30px 0 95px 84px;
  display:block;
  border-radius:17px;
  transition:transform .85s cubic-bezier(.22,1,.36,1),box-shadow .85s cubic-bezier(.22,1,.36,1);
  will-change:transform
}
.foundation-deck-card>img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border-radius:inherit
}
.foundation-deck-card>div {
  position:absolute;
  padding:0;
  max-width:calc(100% - 32px);
  z-index:1
}
.foundation-deck-card>div>span {
  display:inline-block;
  padding:8px 13px;
  border-radius:22px;
  background:var(--kcds-site-foundation-deck-card-background-5);
  color:var(--kcds-gray-0);
  font-size:13px;
  font-weight:700;
  line-height:1.2;
  backdrop-filter:blur(12px)
}
.foundation-deck-card h3,
.foundation-deck-card p {
  display:none
}
.foundation-deck-card.is-active {
  box-shadow:0 28px 55px var(--kcds-site-material-box-shadow-27)
}
.foundation-deck-stage:has(.foundation-deck-card:nth-child(2).is-active) .foundation-deck-card:first-child {
  transform:translate(-28px,40px) rotate(0deg)
}
.foundation-deck-stage:has(.foundation-deck-card:nth-child(3).is-active) .foundation-deck-card:first-child {
  transform:translate(-56px,80px) rotate(-3deg)
}
.foundation-deck-stage:has(.foundation-deck-card:nth-child(4).is-active) .foundation-deck-card:first-child {
  transform:translate(-84px,120px) rotate(-6deg)
}
@media(max-width:1000px) {
.material .foundation-deck {
  gap:24px
}
.foundation-deck-card {
  inset:30px 0 95px 66px;
  transform:translate(calc(var(--card-index)* -22px),calc(var(--card-index)* 34px)) rotate(calc(3deg - var(--card-index)* 3deg))
}
}
@media(max-width:760px) {
.material .foundation-deck {
  grid-template-columns:1fr
}
.foundation-deck-stage {
  margin:10px 16px 25px 0
}
.foundation-deck-card>div {
  top:12px;
  left:12px
}
.foundation-deck-card>div>span {
  font-size:12px;
  padding:7px 11px
}
}
@media(prefers-reduced-motion:reduce) {
.foundation-deck-card {
  transition:none
}
}
.material .m-rail,
.ds-material .ds-primary-rail {
  width:92px;
  padding:18px 8px 14px;
  box-sizing:border-box;
  border-right:1px solid var(--kcds-site-material-border-right);
  font-family:var(--kcds-font-site);
  view-transition-name:primary-navigation
}
.material .m-rail .m-brand img,
.ds-primary-rail .m-brand img {
  width:35px;
  height:35px;
  margin:0 0 18px
}
.material .m-rail button,
.ds-primary-rail button {
  width:64px;
  height:52px;
  border:0;
  background:transparent;
  border-radius:16px;
  display:grid;
  place-items:center
}
.material .m-rail .m-search,
.ds-primary-rail .m-search {
  margin-bottom:12px
}
.material .m-rail nav,
.ds-primary-rail nav {
  display:flex;
  flex-direction:column;
  gap:6px;
  width:100%;
  margin:0
}
.material .m-rail nav a,
.ds-primary-rail nav a {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  width:100%;
  height:66px;
  min-height:66px;
  padding:11px 2px;
  border-radius:16px;
  font:500 11px/1.3 Lato,Arial,sans-serif
}
.material .m-rail nav a>svg,
.ds-primary-rail nav a>svg {
  width:23px;
  height:23px;
  padding:0;
  border-radius:0;
  background:transparent
}
.material .m-rail nav a[aria-current=page],
.ds-primary-rail nav a[aria-current=page] {
  background:var(--kcds-site-material-background-152);
  font-weight:700
}
.dark .material .m-rail,
.ds-material[data-kcds-theme=dark] .ds-primary-rail {
  border-color:var(--kcds-site-dark-border-color-24);
  background:var(--kcds-site-dark-background-56);
  color:var(--kcds-site-dark-color-44)
}
.dark .material .m-rail nav a[aria-current=page],
.ds-material[data-kcds-theme=dark] .ds-primary-rail nav a[aria-current=page] {
  background:var(--kcds-site-dark-background-95);
  color:var(--kcds-site-dark-color-77)
}
.material .m-rail .rail-bottom,
.ds-primary-rail .rail-bottom {
  margin-top:auto;
  padding-top:24px
}
html {
  scrollbar-gutter:stable
}
html.docs-loading .ds-main,
html.docs-loading .ds-sidebar {
  visibility:hidden
}
@view-transition {
  navigation:auto
}
::view-transition-old(root) {
  animation:page-out .16s ease both
}
::view-transition-new(root) {
  animation:page-in .24s ease both
}
::view-transition-group(primary-navigation) {
  animation:none
}
::view-transition-old(primary-navigation) {
  display:none
}
::view-transition-new(primary-navigation) {
  animation:none
}
@keyframes page-out {
to {
  opacity:0
}
}
@keyframes page-in {
from {
  opacity:0
}
to {
  opacity:1
}
}
@media(max-width:760px) {
.material .m-rail,
.ds-material .ds-primary-rail {
  width:72px;
  padding:18px 5px 14px
}
.material .m-rail nav a,
.ds-primary-rail nav a {
  font-size:10px;
  height:62px;
  min-height:62px
}
.material .m-rail button,
.ds-primary-rail button {
  width:56px;
  height:48px
}
}
@media(prefers-reduced-motion:reduce) {
::view-transition-old(root),
::view-transition-new(root) {
  animation:none
}
}
.foundation-deck-card>div {
  inset:auto auto 14px 16px
}
.foundation-deck-card {
  transform:translate(calc(var(--deck-rank,var(--card-index))* -28px),calc(var(--deck-rank,var(--card-index))* 52px)) rotate(calc(3deg - var(--deck-rank,var(--card-index))* 2deg));
  z-index:calc(5 - var(--deck-rank,var(--card-index)))
}
.foundation-deck-card.is-active {
  transform:translate(8px,-14px) rotate(3deg);
  z-index:5
}
.foundation-deck-stage {
  height:555px
}
@media(max-width:1000px) {
.foundation-deck-stage {
  height:495px
}
}
@media(max-width:760px) {
.foundation-deck-stage {
  height:420px
}
.foundation-deck-card {
  inset:25px 0 130px 66px;
  transform:translate(calc(var(--deck-rank,var(--card-index))* -20px),calc(var(--deck-rank,var(--card-index))* 44px)) rotate(calc(3deg - var(--deck-rank,var(--card-index))* 2deg))
}
.foundation-deck-card>div {
  inset:auto auto 10px 12px
}
}
.news-feature>img {
  background:var(--kcds-site-news-feature-background-4)
}
.footer-socials a[aria-label="KnowledgeCity on Instagram"] svg {
  fill:none;
  stroke:currentColor;
  stroke-width:1.8
}
.material .m-suite-scene:has(img[src$="hire.webp"]) {
  isolation:isolate
}
.material .m-suite-scene:has(img[src$="hire.webp"])::before {
  z-index:-1;
  height:180px
}
.material .m-suite-scene:has(img[src$="hire.webp"])>img {
  z-index:0
}
.material .m-suite-scene:has(img[src$="hire.webp"]) .m-demo-card {
  position:relative;
  z-index:2
}
.news-feature>img {
  width:100%;
  height:100%
}
.news-item>img {
  object-fit:contain;
  background:var(--kcds-site-news-item-background-8)
}
@media(max-width:760px) {
.news-feature>img {
  height:260px;
  object-position:left center
}
}
.ds-material.ds-get-started .ds-sidebar,
.ds-material.ds-get-started .ds-section-toggle {
  display:none
}
.ds-material.ds-get-started .ds-shell {
  grid-template-columns:minmax(0,1fr)
}
.ds-material.ds-get-started .ds-main {
  padding-top:32px
}
.ds-material .ds-sidebar[data-area=foundations] .ds-nav-group>div {
  padding-left:0
}
.ds-material .ds-sidebar[data-area=foundations] .ds-nav-group>div>a {
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 13px
}
.ds-material .ds-sidebar[data-area=foundations] .ds-nav-group>div>a>svg {
  width:18px;
  height:18px;
  flex-shrink:0;
  stroke-width:1.75;
  color:inherit
}
.ds-material .ds-crumb,
.ds-material [data-copy-page] {
  display:none
}
.material .m-rail nav,
.ds-material .ds-primary-rail nav {
  padding:0;
  align-items:stretch
}
.material .m-rail nav a,
.ds-material .ds-primary-rail nav a {
  width:100%;
  max-width:none;
  box-sizing:border-box
}
.ds-material .ds-sidebar .ds-nav-group>summary {
  font-size:15px;
  line-height:1.4;
  min-height:44px;
  padding:11px 13px;
  gap:12px
}
.ds-material .ds-sidebar .ds-nav-group>summary>svg {
  width:18px;
  height:18px;
  flex-shrink:0
}
.ds-material .ds-sidebar .ds-nav-group>summary>small {
  font-size:11px
}
.ds-material .ds-sidebar .ds-nav-group>summary>svg:last-child {
  width:14px;
  height:14px
}
.ds-material .ds-sidebar .ds-nav-group>div>a {
  font-size:15px;
  line-height:20px;
  min-height:40px;
  padding:10px 13px
}
.ds-material .ds-sidebar[data-area=components] .ds-nav-group>div {
  padding:1px 0 10px 18px
}
.material .m-suite-scene:has(img[src$="hire-cutout.webp"])::before {
  display:none
}
.material .m-suite-scene>img[src$="hire-cutout.webp"],
.dark .material .m-suite-scene>img[src$="hire-cutout.webp"] {
  top:28px;
  right:0;
  width:100%;
  height:calc(100% - 28px);
  object-fit:contain;
  object-position:right bottom;
  mask-image:none;
  -webkit-mask-image:none;
  filter:none
}
.news-feature>img {
  object-fit:cover;
  object-position:left center
}
@media(min-width:761px) {
.news-feature {
  min-height:360px;
  aspect-ratio:3.6/1
}
}
.foundation-deck-card>img {
  object-fit:contain;
  background:var(--kcds-site-foundation-deck-card-background-6)
}
.material .m-main {
  max-width:1742px;
  margin-left:92px;
  margin-right:0;
  padding:32px 47px 0
}
.material .m-section {
  padding-left:0;
  padding-right:0
}
.material .m-hero {
  margin:0
}
.ds-material.ds-get-started .ds-main {
  max-width:1742px;
  width:100%;
  margin:0;
  padding:32px 47px 0
}
.ds-material.ds-get-started .ds-overview-hero {
  min-height:425px
}
.ds-material.ds-get-started .ds-heading-row {
  margin-top:64px
}
.ds-material.ds-get-started .ds-card h3 {
  font:400 23px/1.2 Lato,Arial,sans-serif
}
.ds-material.ds-get-started .ds-card p {
  font:400 14px/1.5 Lato,Arial,sans-serif
}
.material .m-rail,
.ds-material .ds-primary-rail {
  position:fixed;
  inset:0 auto 0 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  overflow-y:auto;
  z-index:120;
  color:var(--kcds-site-material-color-64);
  background:var(--kcds-site-material-background-98)
}
.material .m-rail svg,
.ds-primary-rail svg {
  flex-shrink:0;
  stroke-width:1.75
}
.material .m-rail .m-brand,
.ds-primary-rail .m-brand {
  display:block;
  line-height:0;
  margin:0;
  padding:0
}
.material .m-rail .m-brand img,
.ds-primary-rail .m-brand img {
  display:block;
  max-width:none
}
.material .m-rail button,
.ds-primary-rail button {
  flex-shrink:0;
  cursor:pointer;
  color:inherit;
  margin-top:0;
  padding:0
}
.material .m-rail nav a,
.ds-primary-rail nav a {
  flex-shrink:0;
  text-decoration:none;
  color:inherit;
  text-align:center
}
.material .m-rail .rail-bottom,
.ds-primary-rail .rail-bottom {
  display:flex;
  flex-direction:column
}
.ds-intro-enter {
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)
}
.ds-intro-enter.is-visible {
  opacity:1;
  transform:none
}
@media(min-width:1834px) {
.material .m-main {
  margin-left:calc(92px + (100vw - 1834px)/2)
}
.ds-material.ds-get-started .ds-main {
  margin-inline:auto
}
}
@media(max-width:760px) {
.ds-material.ds-get-started .ds-main {
  padding:24px 20px 0
}
.ds-material.ds-get-started .ds-overview-hero {
  min-height:0
}
}
@media(prefers-reduced-motion:reduce) {
.ds-intro-enter {
  opacity:1;
  transform:none;
  transition:none
}
}
.ds-material .ds-bottom-home {
  display:none
}
.ds-material:has(#ds-page:not([hidden])) {
  height:100dvh;
  overflow:hidden
}
.ds-material:has(#ds-page:not([hidden])) .ds-shell {
  height:100dvh;
  min-height:0;
  overflow:hidden
}
.ds-material:has(#ds-page:not([hidden])) .ds-main {
  height:100dvh;
  min-height:0;
  padding-top:0;
  display:flex;
  flex-direction:column
}
.ds-material #ds-page:not([hidden]) {
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0
}
.ds-material .ds-reading-pane {
  flex:1;
  min-height:0;
  overflow:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  padding:32px 8px 32px 0;
  scroll-padding-top:24px
}
.ds-material #ds-page .ds-page-pagination {
  flex:none;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin:0;
  padding:12px 0;
  border-top:1px solid var(--kcds-color-border-subtle);
  background:var(--kcds-color-surface-canvas)
}
.ds-material #ds-page .ds-page-pagination a {
  padding:10px 16px;
  min-height:58px;
  border-radius:14px
}
.ds-material #ds-page .ds-page-pagination a:has(small):last-child {
  grid-column:2;
  text-align:right
}
.ds-material #ds-page .ds-page-pagination a:first-child:not(:last-child) {
  grid-column:1;
  text-align:left
}
.ds-material #ds-page .ds-page-pagination small {
  margin-bottom:3px
}
.ds-material:has(#ds-page:not([hidden])) .ds-footer {
  flex:none;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0;
  padding:10px 0 12px;
  min-height:44px;
  border-top:1px solid var(--kcds-color-border-subtle);
  background:var(--kcds-color-surface-canvas)
}
.ds-material:has(#ds-page:not([hidden])) .ds-footer>.footer-credit,
.ds-material:has(#ds-page:not([hidden])) .ds-footer>a {
  display:none
}
.ds-material:has(#ds-page:not([hidden])) .ds-footer .footer-socials {
  width:auto;
  flex-basis:auto;
  gap:12px;
  margin:0
}
.ds-material:has(#ds-page:not([hidden])) .footer-socials a {
  padding:2px;
  border:0;
  background:none;
  min-height:24px
}
.ds-material:has(#ds-page:not([hidden])) .footer-socials a span {
  display:none
}
.ds-material:has(#ds-page:not([hidden])) .footer-socials svg {
  width:15px;
  height:15px
}
@media(max-width:1000px) {
.ds-material .ds-reading-pane {
  padding-top:64px
}
}
@media(max-width:560px) {
.ds-material #ds-page .ds-page-pagination {
  gap:8px
}
.ds-material #ds-page .ds-page-pagination a {
  font-size:12px;
  padding:8px 10px
}
.ds-material:has(#ds-page:not([hidden])) .ds-footer {
  gap:6px;
  font-size:9px
}
.ds-material:has(#ds-page:not([hidden])) .ds-footer .footer-socials {
  gap:8px
}
}
.ds-material #ds-page .ds-page-pagination a[rel=prev] {
  grid-column:1;
  text-align:left
}
.ds-material #ds-page .ds-page-pagination a[rel=next] {
  grid-column:2;
  text-align:right
}
.material .m-section.m-next {
  padding:44px;
  gap:40px
}
.material .foundation-deck-card>img.deck-official-brand {
  position:absolute;
  left:auto;
  right:5%;
  top:auto;
  bottom:5%;
  width:27%;
  height:auto;
  max-height:7%;
  object-fit:contain;
  border-radius:0;
  filter:none;
  pointer-events:none
}
@media(max-width:760px) {
.material .m-section.m-next {
  padding:28px 22px;
  gap:24px
}
}
.material .m-main>section,
.material .m-main>.site-footer {
  box-sizing:border-box;
  width:100%;
  max-width:none;
  margin-left:0;
  margin-right:0;
  min-width:0
}
.material .m-main>section+section {
  margin-top:var(--section-gap)
}
.material .m-main>.m-section {
  padding-top:0;
  padding-bottom:0
}
.material .m-main>.m-next {
  margin-top:24px;
  padding:var(--panel-inset)
}
.material .m-main>.company-story {
  padding:var(--panel-inset)
}
.material .m-main>.m-ai-banner {
  padding:var(--panel-inset)
}
.material .m-main>.live-studio {
  padding:var(--panel-inset)
}
.material .m-main>.site-footer {
  margin-top:48px
}
.material .m-main .m-card-grid,
.material .m-main .news-grid {
  gap:var(--card-gap)
}
@media(max-width:1100px) {
}
@media(max-width:760px) {
.material .m-main>.m-next {
  padding:var(--panel-inset);
  margin-top:20px
}
}
#global-search {
  box-sizing:border-box;
  border:1px solid var(--kcds-site-material-border-right);
  border-radius:22px;
  padding:28px;
  background:var(--kcds-site-surface-background);
  color:var(--kcds-site-ds-catalog-filters-color);
  width:min(650px,92vw);
  max-height:85svh;
  box-shadow:0 30px 100px var(--kcds-site-material-box-shadow-27);
  font-family:var(--kcds-font-site)
}
#global-search::backdrop {
  background:var(--kcds-site-material-background-128);
  backdrop-filter:blur(6px)
}
#global-search .dialog-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px
}
#global-search h2 {
  font-size:28px;
  margin:0
}
#global-search button {
  background:none;
  border:0;
  padding:8px;
  color:inherit;
  cursor:pointer
}
#global-search .search-field {
  display:flex;
  margin-top:25px;
  padding:14px;
  border:1px solid var(--kcds-site-search-field-border-2);
  border-radius:12px
}
#global-search input {
  width:100%;
  border:0;
  background:none;
  color:inherit;
  font:16px Lato,Arial,sans-serif;
  outline:none
}
#global-search .search-field:focus-within {
  outline:2px solid var(--kcds-blue-500)
}
#global-search .search-results {
  max-height:43svh;
  overflow:auto;
  margin-top:18px
}
#global-search .search-results a {
  display:flex;
  justify-content:space-between;
  padding:14px 10px;
  border-radius:10px;
  text-decoration:none;
  font-size:16px;
  color:inherit
}
#global-search .search-results a:hover,
#global-search .search-results a:focus-visible {
  background:var(--kcds-site-search-results-background-2)
}
#global-search .dialog-hint {
  font-size:12px;
  border-top:1px solid var(--kcds-site-search-field-border-2);
  padding-top:15px;
  margin-bottom:0
}
.dark #global-search,
body[data-kcds-theme=dark] #global-search {
  background:var(--kcds-site-dark-background-109);
  color:var(--kcds-site-material-color-83);
  border-color:var(--kcds-site-dark-border-color-25)
}
.dark #global-search .search-results a:hover,
body[data-kcds-theme=dark] #global-search .search-results a:hover {
  background:var(--kcds-site-ds-sidebar-background-8)
}
.ds-material .ds-sidebar .ds-filter {
  display:none
}
.ds-material .ds-sidebar .ds-nav-title {
  margin-bottom:24px
}
.ds-material:has(#ds-page:not([hidden])) .ds-main {
  overflow:visible
}
.ds-material #ds-page:not([hidden]) {
  overflow:visible
}
.ds-material #ds-page .ds-page-pagination,
.ds-material:has(#ds-page:not([hidden])) .ds-footer {
  position:relative;
  border-top-color:transparent
}
.ds-material #ds-page .ds-page-pagination::before,
.ds-material:has(#ds-page:not([hidden])) .ds-footer::before {
  content:"";
  position:absolute;
  top:-1px;
  left:50%;
  width:calc(100vw - 332px);
  height:1px;
  transform:translateX(-50%);
  background:var(--kcds-color-border-subtle);
  pointer-events:none
}
@media(max-width:1000px) {
.ds-material #ds-page .ds-page-pagination::before,
.ds-material:has(#ds-page:not([hidden])) .ds-footer::before {
  width:calc(100vw - 92px)
}
}
@media(max-width:760px) {
.ds-material #ds-page .ds-page-pagination::before,
.ds-material:has(#ds-page:not([hidden])) .ds-footer::before {
  width:calc(100vw - 72px)
}
}
.ds-material #doc-content .state-grid,

.ds-material #doc-content .state-grid__demo,

.ds-material #doc-content .state-grid__label,

.ds-material #doc-content .showcase__demo,

.ds-material #doc-content .showcase__caption,

.ds-material #doc-content .density-split__body {
  background-color:transparent;
  background-image:none
}
.ds-material #doc-content .state-grid__demo,

.ds-material #doc-content .state-grid__label {
  border-color:var(--kcds-color-border-subtle)
}
.ds-material #doc-content .state-grid,

.ds-material #doc-content .state-grid__demo,

.ds-material #doc-content .state-grid__label,

.ds-material #doc-content .showcase__demo,

.ds-material #doc-content .showcase__caption,

.ds-material #doc-content .density-split__body {
  background:transparent
}
html,
body,
body * {
  scrollbar-width:thin;
  scrollbar-color:var(--scroll-thumb) var(--scroll-track)
}
@supports selector(::-webkit-scrollbar) {
html,
body,
body * {
  scrollbar-width:auto;
  scrollbar-color:auto
}
::-webkit-scrollbar {
  width:9px;
  height:9px
}
::-webkit-scrollbar-track {
  background:var(--scroll-track);
  border-radius:999px
}
::-webkit-scrollbar-thumb {
  background:var(--scroll-thumb);
  border:2px solid transparent;
  background-clip:padding-box;
  border-radius:999px;
  min-height:36px
}
::-webkit-scrollbar-thumb:hover {
  background-color:var(--scroll-thumb-hover)
}
::-webkit-scrollbar-thumb:active {
  background-color:var(--scroll-thumb-hover)
}
::-webkit-scrollbar-corner {
  background:transparent
}
::-webkit-scrollbar-button {
  display:none;
  width:0;
  height:0
}
}
@media(forced-colors:active) {
html,
body,
body * {
  scrollbar-color:auto;
  scrollbar-width:auto
}
::-webkit-scrollbar-thumb {
  background:ButtonText
}
::-webkit-scrollbar-track {
  background:Canvas
}
}
body.ds-material[data-kcds-theme=dark] .ds-overview-hero {
  background:var(--kcds-site-ds-material-background-21)
}
.ds-material .ds-overview-hero {
  isolation:isolate;
  clip-path:inset(0 round 30px)
}
.ds-material .ds-overview-hero>img {
  display:block
}
.ds-generated-art {
  position:relative
}
.ds-generated-art>img.catalog-dark {
  display:none
}
body[data-kcds-theme=dark] .ds-generated-art>img.catalog-light {
  display:none
}
body[data-kcds-theme=dark] .ds-generated-art>img.catalog-dark {
  display:block;
  filter:none
}
.material .site-footer,
.material .site-footer .footer-bottom,
.ds-material .ds-footer {
  position:relative;
  border-top-color:transparent
}
.material .site-footer::before,
.material .site-footer .footer-bottom::before,
.ds-material .ds-footer::before {
  content:"";
  position:absolute;
  top:-1px;
  left:50%;
  right:auto;
  bottom:auto;
  width:calc(100vw - 92px);
  max-width:none;
  height:1px;
  transform:translateX(-50%);
  background:var(--kcds-color-border-subtle,var(--kcds-color-border-subtle));
  pointer-events:none
}
.ds-material:has(#ds-page:not([hidden])) .ds-footer::before {
  width:calc(100vw - 332px)
}
@media(max-width:1000px) {
.ds-material:has(#ds-page:not([hidden])) .ds-footer::before {
  width:calc(100vw - 92px)
}
}
@media(max-width:760px) {
.material .site-footer::before,
.material .site-footer .footer-bottom::before,
.ds-material .ds-footer::before,
.ds-material:has(#ds-page:not([hidden])) .ds-footer::before {
  width:calc(100vw - 72px)
}
}
.material .m-suite-scene:has(>img[src$="-cutout.webp"])::before {
  display:none
}
.material .m-suite-scene>img[src$="-cutout.webp"],
.dark .material .m-suite-scene>img[src$="-cutout.webp"] {
  top:28px;
  right:0;
  width:100%;
  height:calc(100% - 48px);
  object-fit:contain;
  object-position:right bottom;
  mask-image:none;
  -webkit-mask-image:none;
  filter:none;
  z-index:1
}
.material .m-rail .m-search,
.ds-material .ds-primary-rail .m-search {
  width:100%;
  max-width:none;
  height:66px;
  min-height:66px;
  box-sizing:border-box;
  border-radius:16px;
  align-self:stretch;
  margin-left:0;
  margin-right:0;
  flex-shrink:0
}
@media(max-width:760px) {
.material .m-rail .m-search,
.ds-material .ds-primary-rail .m-search {
  height:62px;
  min-height:62px
}
}
.foundation-deck-card>img.deck-dark {
  display:none
}
.dark .foundation-deck-card>img.deck-light {
  display:none
}
.dark .foundation-deck-card>img.deck-dark {
  display:block;
  background:var(--kcds-site-dark-background-110);
  filter:none
}
.material .site-footer .footer-signature {
  position:relative;
  border-top-color:transparent
}
.material .site-footer::before,
.material .site-footer .footer-signature::before {
  display:block;
  content:"";
  position:absolute;
  top:-1px;
  left:50%;
  right:auto;
  bottom:auto;
  width:calc(100vw - 92px);
  max-width:none;
  height:1px;
  transform:translateX(-50%);
  background:var(--kcds-color-border-subtle);
  pointer-events:none
}
@media(max-width:760px) {
.material .site-footer::before,
.material .site-footer .footer-signature::before {
  width:calc(100vw - 72px)
}
}
.ds-material #ds-page .ds-page-pagination a[rel=prev] {
  margin-left:0;
  margin-right:auto;
  justify-self:start
}
.ds-material #ds-page .ds-page-pagination a[rel=next] {
  margin-left:auto;
  margin-right:0;
  justify-self:end
}
.suite-picker {
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto
}
.suite-picker-label {
  font-size:13px;
  color:var(--kcds-color-text-secondary)
}
.ds-preview-settings .suite-picker-trigger {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-width:112px;
  border:1px solid var(--kcds-color-border-subtle);
  background:var(--kcds-color-surface-canvas);
  color:var(--kcds-color-text-primary);
  font-size:13px;
  cursor:pointer
}
.suite-picker-trigger::after {
  content:"";
  width:6px;
  height:6px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);
  margin-top:-3px
}
.suite-picker-trigger:focus-visible,
.suite-picker-options [role=option]:focus-visible {
  outline:2px solid var(--kcds-site-suite-picker-trigger-outline-2);
  outline-offset:3px
}
.suite-picker-options {
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  z-index:120;
  min-width:170px;
  padding:6px;
  border:1px solid var(--kcds-color-border-subtle);
  border-radius:18px;
  background:var(--kcds-color-surface-canvas);
  box-shadow:0 12px 32px var(--kcds-site-material-box-shadow-30)
}
.ds-preview-settings .suite-picker-options [role=option] {
  display:block;
  width:100%;
  padding:10px 12px;
  border:0;
  border-radius:12px;
  background:transparent;
  color:var(--kcds-color-text-primary);
  font-size:13px;
  text-align:left;
  cursor:pointer
}
.suite-picker-options [role=option]:hover,
.suite-picker-options [role=option]:focus {
  background:var(--kcds-site-suite-picker-options-background-3)
}
.suite-picker-options [role=option][aria-selected=true] {
  background:var(--kcds-site-suite-picker-options-background-4);
  color:var(--kcds-site-suite-picker-options-color-2);
  font-weight:700
}
.ds-preview-settings>.suite-picker+button {
  margin-left:0
}
.ds-preview-settings .suite-picker-trigger {
  height:40px;
  min-height:40px;
  flex-direction:row;
  flex-wrap:nowrap;
  line-height:18px;
  padding:10px 14px;
  border-radius:16px;
  white-space:nowrap
}
.ds-preview-settings .suite-picker-trigger::after {
  flex:0 0 6px
}
.ds-material #doc-content .shadow-grid {
  background:var(--kcds-color-surface-default);
  border-radius:24px;
  padding:32px 20px
}
.ds-material:not([data-kcds-theme=dark]) #doc-content .shadow-card {
  background:var(--kcds-color-surface-canvas)
}
.material .site-footer .wordmark {
  display:inline-flex;
  align-items:center;
  gap:7px
}
.material .site-footer .wordmark .kc-brand-picture {
  display:block
}
.material .site-footer .wordmark .design-word {
  font-size:18px;
  line-height:22px;
  transform:translateY(3px)
}
@media(max-width:760px) {
.material .site-footer .wordmark .design-word {
  font-size:15px;
  line-height:19px;
  transform:translateY(2px)
}
}
@media(max-width:760px) {
}
.material .site-footer .wordmark .kc-brand-picture {
  width:258.33px;
  height:36.67px
}
@media(max-width:760px) {
.material .site-footer .wordmark .kc-brand-picture {
  width:214.05px;
  height:30.38px
}
}
.material .m-suite-scene:has(>img[src$="-cutout.webp"])::after {
  display:none
}
.material .m-product-detail {
  background:
 linear-gradient(to bottom,var(--kcds-color-primary-tint,var(--kcds-vermilion-50)) 0%,transparent 42%),
 radial-gradient(ellipse at 88% 80%,color-mix(in srgb,var(--kcds-color-primary,var(--kcds-vermilion-500)) 19%,var(--kcds-color-primary-tint,var(--kcds-vermilion-50))) 0%,transparent 65%),
 linear-gradient(115deg,var(--kcds-color-primary-tint,var(--kcds-vermilion-50)) 12%,color-mix(in srgb,var(--kcds-color-primary-tint,var(--kcds-vermilion-50)) 62%,var(--kcds-gray-0)) 57%,var(--kcds-color-primary-tint,var(--kcds-vermilion-50)) 100%);
}
.dark .material .m-product-detail {
  background:
 linear-gradient(to bottom,color-mix(in srgb,var(--kcds-color-primary,var(--kcds-vermilion-500)) 12%,var(--kcds-site-dark-background-62)) 0%,transparent 42%),
 radial-gradient(ellipse at 88% 80%,color-mix(in srgb,var(--kcds-color-primary,var(--kcds-vermilion-500)) 24%,var(--kcds-site-dark-background-62)) 0%,transparent 68%),
 linear-gradient(115deg,var(--kcds-site-dark-background-62) 10%,var(--kcds-site-dark-background-111) 58%,var(--kcds-site-dark-background-62) 100%);
}
.material .m-products .m-product,
.material .m-products .m-product::after,
.material .m-products .m-product-detail {
  transition:none;
  transition-delay:0s
}
.material .m-products .m-suite-scene>img {
  transition:opacity 100ms ease-out
}
@media(max-width:760px) {
.material .m-products .m-suite-scene {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:22px;
  min-height:0;
  margin:28px 0 0;
  padding:0 0 22px;
  overflow:visible
}
.material .m-products .m-suite-scene .m-demo-card {
  position:relative;
  order:0;
  width:100%;
  max-width:340px;
  margin:0;
  padding:22px;
  transform:none;
  box-sizing:border-box;
  z-index:1
}
.material .m-products .m-suite-scene>img[src$="-cutout.webp"],
.dark .material .m-products .m-suite-scene>img[src$="-cutout.webp"] {
  position:relative;
  order:1;
  inset:auto;
  width:100%;
  height:auto;
  max-height:300px;
  aspect-ratio:3/2;
  object-fit:contain;
  object-position:center;
  transform:none;
  margin:0;
  z-index:0
}
.material .m-products .m-demo-card>a {
  position:relative
}
}
.mobile-topbar {
  display:none
}
.mobile-nav-dialog {
  box-sizing:border-box;
  position:fixed;
  inset:0 auto 0 0;
  margin:0;
  width:min(360px,90vw);
  height:100dvh;
  max-height:100dvh;
  max-width:100vw;
  border:0;
  padding:20px;
  background:var(--kcds-color-surface-canvas,var(--kcds-color-surface-canvas,var(--kcds-site-material-background-154)));
  color:var(--kcds-color-text-primary,var(--kcds-color-text-primary,var(--kcds-site-material-color-89)));
  overflow:auto
}
.mobile-nav-dialog::backdrop {
  background:var(--kcds-site-mobile-nav-dialog-background-2);
  backdrop-filter:blur(3px)
}
.mobile-nav-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:20px
}
.mobile-nav-heading button,
.mobile-theme-toggle {
  border:1px solid var(--kcds-color-border-subtle,var(--kcds-color-border-subtle));
  background:transparent;
  color:inherit;
  border-radius:12px;
  padding:12px;
  cursor:pointer
}
.mobile-nav-dialog>nav {
  display:grid;
  gap:6px
}
.mobile-nav-dialog>nav a {
  display:flex;
  gap:14px;
  align-items:center;
  padding:13px 14px;
  border-radius:14px;
  text-decoration:none;
  color:inherit;
  font-size:15px
}
.mobile-nav-dialog svg {
  width:22px;
  height:22px
}
.mobile-nav-sections {
  border-top:1px solid var(--kcds-color-border-subtle,var(--kcds-color-border-subtle));
  margin-top:20px;
  padding-top:20px
}
.mobile-theme-toggle {
  margin-top:20px;
  width:100%;
  text-align:left
}
.dark .mobile-nav-dialog {
  background:var(--kcds-site-dark-background-110);
  color:var(--kcds-site-material-color-83)
}
@media(max-width:760px) {
.material .m-rail,
.ds-material .ds-primary-rail,
.ds-material .ds-sidebar,
[data-doc-menu] {
  display:none
}
.mobile-topbar {
  position:fixed;
  inset:0 0 auto;
  height:64px;
  display:flex;
  gap:12px;
  padding:0 16px;
  box-sizing:border-box;
  z-index:130;
  background:var(--kcds-color-surface-canvas,var(--kcds-color-surface-canvas,var(--kcds-site-material-background-154)));
  border-bottom:1px solid var(--kcds-color-border-subtle,var(--kcds-color-border-subtle))
}
.mobile-topbar button {
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  min-height:40px;
  margin:0;
  padding:8px;
  border:0;
  border-radius:12px;
  background:transparent;
  color:inherit
}
.mobile-topbar svg {
  width:23px;
  height:23px
}
.mobile-topbar .m-brand {
  display:flex;
  align-items:center;
  margin:0;
  padding:0
}
.dark .mobile-topbar {
  background:var(--kcds-site-dark-background-110);
  color:var(--kcds-site-material-color-83)
}
.material .m-main {
  margin-left:0;
  margin-right:0;
  padding:88px 20px 0
}
.ds-material .ds-shell {
  display:block;
  margin-left:0;
  padding-left:0;
  padding-top:64px;
  box-sizing:border-box
}
.ds-material .ds-main,
.ds-material.ds-get-started .ds-main {
  margin-left:0;
  width:100%;
  padding-left:20px;
  padding-right:20px
}
.ds-material .ds-reading-pane {
  padding-top:24px
}
.material .site-footer::before,
.material .site-footer .footer-signature::before,
.ds-material .ds-footer::before,
.ds-material:has(#ds-page:not([hidden])) .ds-footer::before,
.ds-material #ds-page .ds-page-pagination::before {
  width:100vw
}
}
.material .m-rail .m-search,
.ds-material .ds-primary-rail .m-search,
.mobile-topbar .m-search,

.material .m-rail .m-search:hover,
.ds-material .ds-primary-rail .m-search:hover,
.mobile-topbar .m-search:hover,

.material .m-rail .m-search:active,
.ds-material .ds-primary-rail .m-search:active,
.mobile-topbar .m-search:active {
  background:transparent;
  border:0;
  box-shadow:none;
}
.material .m-rail .m-search svg,
.ds-material .ds-primary-rail .m-search svg,
.mobile-topbar .m-search svg {
  background:transparent;
  box-shadow:none
}
.mobile-nav-dialog {
  border-radius:0 20px 20px 0;
  padding-bottom:max(20px,env(safe-area-inset-bottom))
}
.mobile-nav-dialog[open] {
  display:flex;
  flex-direction:column;
  gap:0
}
.mobile-nav-heading {
  flex-shrink:0
}
.mobile-nav-heading button {
  display:grid;
  place-items:center;
  box-sizing:border-box;
  width:40px;
  height:40px;
  min-width:40px;
  min-height:40px;
  padding:8px;
  border-radius:10px
}
.mobile-nav-heading button svg {
  width:22px;
  height:22px
}
.mobile-nav-dialog>nav {
  flex-shrink:0
}
.mobile-nav-sections {
  flex:1;
  min-height:100px;
  overflow-y:auto;
  margin-bottom:20px
}
.mobile-nav-dialog .mobile-theme-toggle {
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
  margin-top:auto;
  min-height:48px
}
.mobile-nav-dialog .mobile-theme-toggle svg {
  width:22px;
  height:22px;
  flex-shrink:0
}
.mobile-nav-dialog:not(:has(.mobile-nav-sections)) .mobile-theme-toggle {
  margin-top:auto
}
.mobile-nav-dialog>nav {
  margin-bottom:24px
}
.mobile-theme-toggle .theme-sun,
.mobile-theme-toggle .theme-light-label {
  display:none
}
.dark .mobile-theme-toggle .theme-sun,
.dark .mobile-theme-toggle .theme-light-label {
  display:initial
}
.dark .mobile-theme-toggle .theme-moon,
.dark .mobile-theme-toggle .theme-dark-label {
  display:none
}
.mobile-nav-dialog>nav a[aria-current=page] {
  background:var(--kcds-site-material-background-152);
  color:var(--kcds-site-material-color-64);
  font-weight:700
}
.dark .mobile-nav-dialog>nav a[aria-current=page] {
  background:var(--kcds-site-dark-background-95);
  color:var(--kcds-site-dark-color-77)
}
@media(max-width:760px) {
.mobile-topbar {
  align-items:center
}
.mobile-topbar .mobile-menu-toggle,
.mobile-topbar .m-search,
.mobile-topbar .m-brand {
  display:flex;
  align-items:center;
  justify-content:center;
  align-self:center;
  width:40px;
  height:40px;
  min-height:40px;
  padding:0;
  line-height:0;
  transform:none;
  margin-top:0;
  margin-bottom:0
}
.mobile-topbar .m-search {
  margin-left:auto
}
.mobile-topbar button svg {
  display:block;
  width:24px;
  height:24px;
  margin:0;
  transform:none;
  vertical-align:middle
}
.mobile-topbar .m-brand img {
  display:block;
  width:35px;
  height:35px;
  object-fit:contain;
  margin:0
}
}
@media(max-width:760px) {
.material .m-hero .m-eyebrow {
  line-height:1.5;
  letter-spacing:.06em;
  font-weight:600
}
}
@media(max-width:760px) {
.material .m-main .m-eyebrow,
.material .m-main .eyebrow {
  font-size:12px;
  line-height:1.5;
  letter-spacing:.06em;
  font-weight:600
}
.material .m-main .m-button,
.material .m-main .pill-link {
  display:flex;
  width:100%;
  max-width:none;
  min-height:52px;
  box-sizing:border-box;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:15px 20px;
  font-size:16px;
  line-height:1.3
}
.material .m-main .m-button svg,
.material .m-main .pill-link svg {
  flex-shrink:0;
  width:21px;
  height:21px
}
}
@media(max-width:760px) {
.material .m-main>.site-footer {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:30px 20px;
  margin:44px 0 0;
  padding:28px 0 max(24px,env(safe-area-inset-bottom));
  border-radius:0;
  width:100%;
  max-width:none
}
.material .site-footer>div:first-child {
  grid-column:1/-1
}
.material .site-footer .wordmark {
  margin:0 0 12px
}
.material .site-footer>div:first-child>p {
  font-size:14px;
  line-height:1.65;
  margin:0;
  max-width:32ch
}
.material .site-footer>div:first-child>p br {
  display:none
}
.material .site-footer>div:not(.footer-signature)>span {
  display:block;
  margin:0 0 10px;
  font-size:14px;
  font-weight:700
}
.material .site-footer>div>a:not(.wordmark) {
  display:block;
  font-size:14px;
  line-height:1.5;
  padding:8px 0;
  margin:0
}
.material .site-footer .footer-socials {
  grid-column:1/-1;
  grid-row:auto;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin:0
}
.material .site-footer .footer-socials a {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:44px;
  padding:10px;
  border-radius:12px;
  font-size:13px;
  box-sizing:border-box;
  margin:0
}
.material .site-footer .footer-socials svg {
  width:18px;
  height:18px;
  flex-shrink:0
}
.material .site-footer .footer-signature {
  grid-column:1/-1;
  grid-row:auto;
  order:5;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:18px;
  margin:0;
  padding-top:22px
}
.material .site-footer .footer-signature>span {
  font-size:12px;
  line-height:1.7;
  max-width:30ch
}
.material .site-footer .footer-signature>a {
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  min-height:44px;
  font-size:14px;
  padding:0
}
.ds-material.ds-get-started .ds-footer {
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  padding:24px 0;
  font-size:12px;
  line-height:1.6
}
.ds-material.ds-get-started .ds-footer .footer-socials {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  width:100%
}
.ds-material.ds-get-started .ds-footer .footer-socials a {
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border-radius:12px
}
}
@media(max-width:760px) {
.material .m-products {
  font-family:var(--kcds-font-site)
}
.material .m-products .m-product b {
  font-size:16px;
  line-height:1.3;
  font-weight:700
}
.material .m-products .m-product small {
  font-size:13px;
  line-height:1.4;
  font-weight:400;
  margin-top:5px
}
.material .m-products .m-detail-copy .m-eyebrow {
  font-size:14px;
  line-height:1.4;
  font-weight:600;
  letter-spacing:.03em;
  margin-bottom:16px
}
.material .m-products .m-detail-copy h3 {
  font-size:30px;
  line-height:1.12;
  letter-spacing:-.04em;
  font-weight:500;
  margin-bottom:24px
}
.material .m-products .m-detail-copy>p {
  font-size:16px;
  line-height:1.55
}
.material .m-products .m-product-list {
  font-size:14px;
  line-height:1.5;
  gap:14px
}
.material .m-products .m-demo-top {
  font-size:14px;
  line-height:1.4;
  font-weight:600
}
.material .m-products .demo-eyebrow {
  font-size:13px;
  line-height:1.4;
  letter-spacing:.03em
}
.material .m-products .m-demo-card h4 {
  font-size:26px;
  line-height:1.15;
  letter-spacing:-.035em;
  font-weight:500
}
.material .m-products .m-demo-progress>div:last-child>b {
  font-size:14px;
  line-height:1.4;
  font-weight:600
}
.material .m-products .m-demo-progress>div:last-child>small {
  font-size:13px;
  line-height:1.5;
  margin-top:5px
}
.material .m-products .m-demo-card>a {
  font-size:16px;
  line-height:1.3;
  min-height:52px;
  padding:15px 18px;
  box-sizing:border-box
}
.material .m-products .demo-avatar {
  font-size:12px
}
}
@media(max-width:760px) {
.material .foundation-deck-copy {
  width:100%;
  min-width:0
}
.material .foundation-deck .foundation-deck-copy>.pill-link {
  display:flex;
  width:100%;
  max-width:none;
  box-sizing:border-box;
  align-self:stretch;
  justify-content:space-between;
  min-height:52px;
  padding:15px 20px;
  font-size:16px
}
}
html:not(.dark) .mobile-nav-dialog>nav a[aria-current=page] {
  background:var(--kcds-site-ds-material-background-17);
  color:var(--kcds-site-dark-color-89);
  font-weight:700
}
@media(max-width:760px) {
.ds-material:has(#ds-page:not([hidden])) .ds-shell {
  padding-top:64px;
  box-sizing:border-box
}
.ds-material:has(#ds-page:not([hidden])) .ds-main {
  padding-top:0;
  padding-bottom:env(safe-area-inset-bottom,0px);
  box-sizing:border-box
}
.ds-material #ds-page .ds-page-pagination {
  padding:12px 0;
  gap:12px;
  flex-shrink:0
}
.ds-material #ds-page .ds-page-pagination a {
  width:100%;
  min-width:0;
  min-height:60px;
  padding:10px 14px;
  font-size:14px;
  box-sizing:border-box;
  overflow-wrap:anywhere
}
.ds-material #ds-page .ds-page-pagination a:only-child {
  grid-column:1/-1;
  width:100%
}
.ds-material #ds-page .ds-page-pagination small {
  font-size:10px;
  line-height:1.4
}
.ds-material:has(#ds-page:not([hidden])) .ds-footer {
  min-height:42px;
  padding:8px 0;
  box-sizing:border-box;
  flex-shrink:0
}
}
@media(max-width:760px) {
html,
body {
  max-width:100%;
  overflow-x:clip
}
.ds-material .ds-main,
.ds-material #ds-page,
.ds-material .ds-reading-pane,
.ds-material #doc-content,
.ds-material .ds-article-grid {
  min-width:0;
  max-width:100%
}
.ds-material .ds-reading-pane {
  overflow-x:hidden
}
.ds-material #doc-content * {
  min-width:0;
  box-sizing:border-box;
  overflow-wrap:anywhere
}
.ds-material #doc-content .spec-table {
  display:table;
  width:100%;
  max-width:100%;
  table-layout:fixed;
  white-space:normal
}
.ds-material #doc-content .spec-table th,
.ds-material #doc-content .spec-table td {
  min-width:0;
  width:auto;
  padding:10px 8px;
  white-space:normal;
  overflow-wrap:anywhere
}
.ds-material #doc-content table {
  width:100%;
  max-width:100%;
  table-layout:fixed
}
.ds-material #doc-content pre,
.ds-material #doc-content code {
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word;
  max-width:100%
}
.ds-material #doc-content pre {
  overflow-x:hidden
}
.ds-material #doc-content .density-split,
.ds-material #doc-content .shadow-grid {
  grid-template-columns:minmax(0,1fr)
}
.ds-material #doc-content .state-grid__demo {
  flex-wrap:wrap;
  max-width:100%
}
.ds-material #doc-content img,
.ds-material #doc-content video,
.ds-material #doc-content canvas {
  max-width:100%;
  height:auto
}
.ds-material #doc-content input,
.ds-material #doc-content select,
.ds-material #doc-content textarea {
  max-width:100%
}
.ds-material #doc-content .showcase__demo {
  overflow-x:clip;
  max-width:100%
}
.material .m-main>* {
  min-width:0
}
}
.mobile-nav-back {
  display:flex;
  align-items:center;
  gap:12px;
  border:0;
  background:transparent;
  color:inherit;
  font:600 15px/1.4 Lato,Arial,sans-serif;
  padding:12px 0;
  margin:0 0 8px;
  cursor:pointer
}
.mobile-nav-dialog .mobile-nav-sections {
  margin-top:0;
  border-top:0;
  padding-top:0
}
.mobile-nav-dialog [hidden] {
  display:none!important
}
@media(max-width:760px) {
body.ds-material:has(#ds-page:not([hidden])) {
  margin:0;
  padding:0;
  height:100dvh;
  overflow:hidden
}
.ds-material:has(#ds-page:not([hidden])) .ds-shell {
  position:fixed;
  inset:64px 0 0;
  display:flex;
  height:auto!important;
  min-height:0;
  margin:0!important;
  padding:0!important;
  overflow:hidden
}
.ds-material:has(#ds-page:not([hidden])) .ds-main {
  display:flex;
  flex-direction:column;
  flex:1;
  height:100%!important;
  max-height:100%;
  min-height:0;
  margin:0!important;
  padding:0 20px env(safe-area-inset-bottom,0px)!important;
  overflow:hidden
}
.ds-material #ds-page:not([hidden]) {
  flex:1;
  min-height:0;
  margin:0;
  padding:0;
  overflow:hidden
}
.ds-material #ds-page .ds-reading-pane {
  flex:1;
  min-height:0;
  padding-top:16px;
  margin-top:0;
  overflow-y:auto
}
.ds-material .ds-preview-settings {
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  margin:0 0 24px;
  border-radius:18px;
  min-height:60px
}
.ds-material .ds-preview-settings>span {
  width:auto;
  min-width:0;
  flex:1;
  margin:0;
  white-space:nowrap;
  gap:6px
}
.ds-material .ds-preview-settings .suite-picker {
  margin-left:0;
  gap:0;
  flex-shrink:0
}
.ds-material .ds-preview-settings .suite-picker-label {
  display:none
}
.ds-material .ds-preview-settings .suite-picker-trigger {
  min-width:96px;
  height:38px;
  min-height:38px;
  padding:8px 12px;
  gap:12px
}
.ds-material .ds-preview-settings>button {
  flex-shrink:0;
  margin:0;
  width:34px;
  height:34px;
  padding:7px
}
}
@media(max-width:360px) {
.ds-material .ds-preview-settings>span {
  font-size:11px
}
.ds-material .ds-preview-settings>span svg {
  display:none
}
}
.mobile-nav-dialog .mobile-nav-heading {
  margin-bottom:4px
}
.mobile-nav-dialog .mobile-nav-heading>b {
  font-size:16px;
  font-weight:600
}
.mobile-nav-dialog:has(.mobile-nav-back:not([hidden])) .mobile-nav-heading>b {
  visibility:hidden
}
.mobile-nav-dialog .mobile-nav-back {
  font-size:16px;
  padding:12px 4px;
  margin-bottom:16px
}
.mobile-nav-dialog .mobile-nav-sections {
  padding:0 0 16px;
  margin:0 0 16px;
  border:0
}
.mobile-nav-sections .ds-nav-groups {
  margin:0;
  padding:0;
  border:0
}
.mobile-nav-sections .ds-nav-group {
  margin:0 0 4px
}
.mobile-nav-sections .ds-nav-group summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 12px;
  gap:12px;
  font-size:16px;
  line-height:1.4;
  font-weight:600;
  list-style:none
}
.mobile-nav-sections .ds-nav-group summary>svg,
.mobile-nav-sections .ds-nav-group summary small {
  display:none
}
.mobile-nav-sections .ds-nav-group summary::after {
  content:"";
  width:6px;
  height:6px;
  flex-shrink:0;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(45deg)
}
.mobile-nav-sections .ds-nav-group[open] summary::after {
  transform:rotate(225deg)
}
.mobile-nav-sections [data-nav-id] {
  display:flex;
  align-items:center;
  min-height:48px;
  padding:12px 16px;
  margin:2px 0;
  border-radius:14px;
  font-size:16px;
  line-height:1.4;
  text-decoration:none;
  gap:0;
  color:inherit;
  box-sizing:border-box
}
.mobile-nav-sections [data-nav-id][hidden] {
  display:none!important
}
.mobile-nav-sections [data-nav-id] svg {
  display:none
}
.mobile-nav-sections[data-area=components] [data-nav-id] {
  padding-left:28px;
  font-size:15px
}
.mobile-nav-sections [data-nav-id][aria-current=page] {
  background:var(--kcds-site-ds-material-background-17);
  color:var(--kcds-site-dark-color-89);
  font-weight:600
}
.dark .mobile-nav-sections [data-nav-id][aria-current=page] {
  background:var(--kcds-site-dark-background-95);
  color:var(--kcds-site-dark-color-77)
}
.mobile-nav-sections .ds-nav-group>div {
  padding:0;
  margin:0
}
.mobile-nav-dialog .mobile-theme-toggle {
  font-size:14px;
  justify-content:center;
  border-radius:24px
}
.mobile-nav-dialog>nav a[data-section=foundations]::after,

.mobile-nav-dialog>nav a[data-section=components]::after {
  content:"";
  display:block;
  width:7px;
  height:7px;
  flex:0 0 7px;
  margin-left:auto;
  margin-right:3px;
  border-top:1.75px solid currentColor;
  border-right:1.75px solid currentColor;
  transform:rotate(45deg);
}
body[data-kcds-theme=dark] .suite-picker-options [role=option][aria-selected=true] {
  background:var(--kcds-site-dark-background-95);
  color:var(--kcds-site-dark-color-77)
}
body[data-kcds-theme=dark] .suite-picker-options [role=option]:hover,

body[data-kcds-theme=dark] .suite-picker-options [role=option]:focus {
  background:var(--kcds-site-dark-background-96);
  color:var(--kcds-site-dark-color-77)
}
body[data-kcds-theme=dark] .suite-picker-options [role=option][aria-selected=true]:hover,

body[data-kcds-theme=dark] .suite-picker-options [role=option][aria-selected=true]:focus {
  background:var(--kcds-site-dark-background-95)
}
.material .m-product[aria-pressed=true]::before {
  content:"";
  position:absolute;
  left:-14px;
  right:-14px;
  top:100%;
  height:14px;
  pointer-events:none;
  background:radial-gradient(circle at 0 0,transparent 14px,var(--join-color) 14.5px) left top/14px 14px no-repeat,radial-gradient(circle at 100% 0,transparent 14px,var(--join-color) 14.5px) right top/14px 14px no-repeat;
  transition:none
}
.material .m-product:first-child[aria-pressed=true]::before {
  clip-path:inset(0 0 0 14px)
}
.material .m-product:last-child[aria-pressed=true]::before {
  clip-path:inset(0 14px 0 0)
}
@media(max-width:760px) {
.material .m-product[aria-pressed=true]::before {
  left:-12px;
  right:-12px;
  height:12px;
  background-size:12px 12px;
  background-image:radial-gradient(circle at 0 0,transparent 12px,var(--join-color) 12.5px),radial-gradient(circle at 100% 0,transparent 12px,var(--join-color) 12.5px)
}
.material .m-product:first-child[aria-pressed=true]::before {
  clip-path:inset(0 0 0 12px)
}
.material .m-product:last-child[aria-pressed=true]::before {
  clip-path:inset(0 12px 0 0)
}
}
.ds-material .ds-overview-hero .ds-hero-actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:28px
}
.ds-material .ds-overview-hero .ds-hero-actions>a {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  min-height:56px;
  padding:16px 24px;
  box-sizing:border-box;
  font-size:16px;
  line-height:1.35;
  font-weight:600;
  border-radius:28px
}
.ds-material .ds-overview-hero .ds-hero-actions>a svg {
  width:20px;
  height:20px
}
@media(max-width:760px) {
.ds-material .ds-overview-hero .ds-hero-actions {
  flex-direction:column
}
.ds-material .ds-overview-hero .ds-hero-actions>a {
  width:100%;
  min-height:52px
}
}
.material .m-products .m-product[aria-pressed=true] {
  border-width:0
}
.material .m-products .m-product[aria-pressed=true]::after {
  left:0;
  right:0;
  top:calc(100% - 1px);
  height:16px;
  background:var(--kcds-color-primary-tint);
  z-index:1
}
.material .m-products .m-product[aria-pressed=true]::before {
  left:-14px;
  right:-14px;
  top:100%;
  height:15px;
  background:radial-gradient(circle at 0 0,transparent 13.5px,var(--join-color) 14px) left top/14px 14px no-repeat,radial-gradient(circle at 100% 0,transparent 13.5px,var(--join-color) 14px) right top/14px 14px no-repeat;
  z-index:1
}
.dark .material .m-products .m-product[aria-pressed=true]::after {
  background:color-mix(in srgb,var(--kcds-color-primary) 12%,var(--kcds-site-dark-background-62))
}
@media(max-width:760px) {
.material .m-products .m-product[aria-pressed=true]::after {
  height:14px
}
.material .m-products .m-product[aria-pressed=true]::before {
  left:-12px;
  right:-12px;
  height:13px;
  background-size:12px 12px;
  background-image:radial-gradient(circle at 0 0,transparent 11.5px,var(--join-color) 12px),radial-gradient(circle at 100% 0,transparent 11.5px,var(--join-color) 12px)
}
}
.material .studio-suites button {
  justify-content:center
}
.material .studio-controls fieldset:has(.studio-suites)>legend {
  width:100%;
  text-align:center
}
.dark .material .studio-controls .studio-segment {
  background:var(--kcds-site-dark-background-113);
  border:1px solid var(--kcds-site-dark-border-color-24)
}
.dark .material .studio-controls .studio-segment button {
  color:var(--kcds-site-dark-color-90)
}
.dark .material .studio-controls .studio-segment button[aria-pressed=true] {
  background:var(--kcds-site-dark-background-114);
  color:var(--kcds-gray-0);
  box-shadow:0 1px 4px var(--kcds-site-material-box-shadow-27)
}
.dark .material .studio-controls .studio-segment button:not([aria-pressed=true]):hover {
  background:var(--kcds-site-dark-background-115);
  color:var(--kcds-gray-0)
}
body .ds-card .ds-generated-art {
  overflow:hidden;
  isolation:isolate;
  clip-path:inset(0 round 28px);
  border:0
}
body[data-kcds-theme=dark] .ds-card .ds-generated-art {
  background:var(--kcds-site-ds-card-background-3)
}
body .ds-card .ds-generated-art>img {
  display:block;
  border:0;
  border-radius:0
}
body .ds-card .ds-generated-art>img.catalog-dark {
  display:none
}
body[data-kcds-theme=dark] .ds-card .ds-generated-art>img.catalog-light {
  display:none
}
body[data-kcds-theme=dark] .ds-card .ds-generated-art>img.catalog-dark {
  display:block
}
.material .m-main>.site-footer {
  padding-bottom:24px;
  margin-bottom:0
}
.material .site-footer .footer-signature {
  padding-bottom:0;
  margin-bottom:0
}
.material .m-main {
  padding-bottom:0
}
@media(max-width:760px) {
.material .m-main>.site-footer {
  padding-bottom:max(16px,env(safe-area-inset-bottom))
}
}
.material .m-hero .m-eyebrow {
  font-size:15px;
  line-height:1.5;
  font-weight:600;
  letter-spacing:.06em
}
@media(max-width:760px) {
.material .m-hero .m-eyebrow {
  font-size:13px
}
}
.material .m-main .m-eyebrow,
.material .m-main .eyebrow,
.ds-material .ds-eyebrow {
  font-size:14px;
  line-height:1.5;
  letter-spacing:.05em
}
.ds-material .ds-heading-row>a,
.ds-material .ds-guidance a,
.material .news-read {
  font-weight:600;
  min-height:44px;
  align-items:center
}
.ds-material .ds-card p,
.ds-material .ds-intro-strip small,
.ds-material .ds-intro-strip span,
.material .news-kind,
.material .company-facts small {
  font-size:14px;
  line-height:1.55
}
.material .studio-controls legend,
.material .studio-controls button,
.material .studio-range,
.material .studio-token,
.material .studio-token code {
  font-size:14px;
  line-height:1.5
}
.material .studio-token small,
.material .studio-canvas-top,
.material .studio-kicker,
.material .lab-meta,
.material .lab-success,
.material .ai-chat-heading,
.material .ai-chat-demo small {
  font-size:14px;
  line-height:1.5
}
.material .site-footer .footer-signature>span,
.material .site-footer .footer-socials a,
.ds-material.ds-get-started .ds-footer {
  font-size:14px;
  line-height:1.6
}
.ds-material .ds-preview-settings>span,
.ds-material .suite-picker-label,
.ds-material .suite-picker-trigger,
.ds-material .suite-picker-options [role=option] {
  font-size:14px;
  line-height:1.4
}
.ds-material #ds-page .ds-page-pagination small {
  font-size:12px;
  line-height:1.4
}
.ds-material #ds-page .ds-page-pagination a {
  font-size:16px;
  line-height:1.4
}
.ds-material .ds-nav-group summary small {
  font-size:12px
}
.ds-material:has(#ds-page:not([hidden])) .ds-footer {
  font-size:12px;
  line-height:1.5
}
@media(max-width:760px) {
.ds-material .ds-heading-row {
  flex-wrap:wrap;
  gap:12px
}
.material .m-main .m-eyebrow,
.material .m-main .eyebrow,
.ds-material .ds-eyebrow {
  font-size:14px
}
.ds-material .ds-preview-settings>span svg {
  display:none
}
.ds-material:has(#ds-page:not([hidden])) .ds-footer {
  flex-wrap:wrap;
  gap:6px
}
.ds-material #doc-content .spec-table th,
.ds-material #doc-content .spec-table td {
  font-size:14px;
  line-height:1.5
}
}
.ds-material.ds-get-started .ds-overview-hero {
  grid-template-columns:1.15fr 1fr;
  background:var(--kcds-site-material-background-101);
  border-radius:32px;
  clip-path:inset(0 round 32px)
}
.ds-material.ds-get-started .ds-overview-hero>div {
  padding:48px 48px 45px;
  background:var(--kcds-site-material-background-101);
  color:var(--kcds-site-ds-material-color-17)
}
.ds-material.ds-get-started .ds-overview-hero .ds-eyebrow {
  font-family:var(--kcds-font-site);
  font-size:15px;
  line-height:1.5;
  font-weight:600;
  letter-spacing:.05em;
  margin-bottom:30px;
  color:inherit
}
.ds-material.ds-get-started .ds-overview-hero h1 {
  font-family:var(--kcds-font-site);
  font-size:clamp(52px,5.4vw,88px);
  font-weight:500;
  letter-spacing:-.055em;
  line-height:1.01;
  margin:0 0 22px
}
.ds-material.ds-get-started .ds-overview-hero p {
  font-size:21px;
  line-height:1.5;
  max-width:640px;
  margin:0 0 28px;
  color:var(--kcds-site-material-color-65)
}
.ds-material.ds-get-started .ds-overview-hero .ds-hero-actions>a {
  font-size:20px;
  font-weight:700;
  padding:20px 28px;
  min-height:68px;
  border-radius:100px;
  gap:20px
}
body.ds-material.ds-get-started[data-kcds-theme=dark] .ds-overview-hero,
body.ds-material.ds-get-started[data-kcds-theme=dark] .ds-overview-hero>div {
  background:var(--kcds-site-dark-background-58);
  color:var(--kcds-site-dark-color-46)
}
body.ds-material.ds-get-started[data-kcds-theme=dark] .ds-overview-hero p {
  color:var(--kcds-site-dark-color-48)
}
body.ds-material.ds-get-started[data-kcds-theme=dark] .ds-overview-hero .ds-eyebrow {
  color:var(--kcds-site-dark-color-48)
}
body.ds-material.ds-get-started[data-kcds-theme=dark] .ds-hero-actions>a:first-child {
  background:var(--kcds-site-ds-material-background-26);
  color:var(--kcds-site-ds-material-color-18);
  border-color:transparent
}
@media(max-width:1100px) {
.ds-material.ds-get-started .ds-overview-hero>div {
  padding:32px
}
.ds-material.ds-get-started .ds-overview-hero h1 {
  font-size:52px
}
.ds-material.ds-get-started .ds-overview-hero .ds-hero-actions>a {
  font-size:16px;
  padding:16px 24px;
  min-height:56px
}
}
@media(max-width:760px) {
.ds-material.ds-get-started .ds-overview-hero {
  grid-template-columns:1fr
}
.ds-material.ds-get-started .ds-overview-hero>div {
  padding:28px 24px
}
.ds-material.ds-get-started .ds-overview-hero h1 {
  font-size:40px
}
.ds-material.ds-get-started .ds-overview-hero p {
  font-size:16px
}
.ds-material.ds-get-started .ds-overview-hero .ds-eyebrow {
  font-size:14px;
  margin-bottom:22px
}
}
.dark .ds-material #doc-content .tab {
  color:var(--kcds-color-text-secondary,var(--kcds-site-dark-color-91))
}
.dark .ds-material #doc-content .tab--active {
  color:var(--kcds-color-text-link,var(--kcds-site-ds-material-background-26));
  border-color:currentColor
}
.material,
.ds-material {
  font-family:var(--kcds-font-site)
}
.material .m-main :is(.m-eyebrow,.eyebrow),
.ds-material .ds-eyebrow {
  font-size:var(--kcds-text-site-label);
  line-height:1.5;
  letter-spacing:.05em;
  font-weight:600
}
.material .m-main :is(.pill-link,.m-button),
.ds-material .ds-hero-actions>a {
  font-family:var(--kcds-font-site);
  font-size:var(--kcds-text-body);
  line-height:1.4;
  font-weight:600;
  min-height:var(--kcds-site-control-height);
  box-sizing:border-box
}
.material .m-main .m-hero-copy>.m-button {
  font-size:20px;
  min-height:64px
}
.ds-material .ds-heading-row>a,
.ds-material .ds-guidance a,
.material .news-read {
  font-size:var(--kcds-text-body);
  line-height:1.5
}
.mobile-nav-dialog>nav a[aria-current=page],
html:not(.dark) .mobile-nav-dialog>nav a[aria-current=page],
.dark .mobile-nav-dialog>nav a[aria-current=page],
.mobile-nav-sections [data-nav-id][aria-current=page] {
  background:var(--kcds-color-navigation-selected);
  color:var(--kcds-color-navigation-on-selected)
}
.ds-material .suite-picker-options [role=option][aria-selected=true] {
  background:var(--kcds-color-navigation-selected);
  color:var(--kcds-color-navigation-on-selected)
}
.mobile-nav-dialog :is(button,a):focus-visible,
.suite-picker :is(button,[role=option]):focus-visible,
.m-rail :is(a,button):focus-visible,
.ds-primary-rail :is(a,button):focus-visible {
  outline:2px solid var(--kcds-color-border-focus);
  outline-offset:3px
}
.material .site-footer .footer-signature>span,
.ds-material.ds-get-started .ds-footer {
  font-size:var(--kcds-text-site-label);
  line-height:1.6
}
.ds-material .ds-preview-settings {
  gap:12px
}
.ds-material .suite-picker-trigger {
  font-size:var(--kcds-text-site-label);
  min-height:40px
}
.ds-material .suite-picker-options [role=option] {
  font-size:var(--kcds-text-site-label);
  min-height:40px
}
.ds-material .ds-page-pagination a {
  min-height:60px;
  font-size:var(--kcds-text-body)
}
.ds-material .ds-page-pagination small {
  font-size:var(--kcds-text-site-meta)
}
.material .site-footer,
.material .footer-signature {
  overflow:visible
}
.material .m-main {
  overflow-x:clip
}
@media(max-width:760px) {
.material .m-main :is(.m-button,.pill-link),
.ds-material .ds-hero-actions>a {
  width:100%;
  font-size:var(--kcds-text-body);
  min-height:var(--kcds-site-control-height)
}
.material .m-main .m-hero-copy>.m-button {
  font-size:var(--kcds-text-body);
  min-height:var(--kcds-site-control-height)
}
.ds-material .ds-overview-hero .ds-hero-actions>a {
  justify-content:center
}
.mobile-nav-dialog {
  font-size:var(--kcds-text-body)
}
.mobile-nav-dialog [data-nav-id] {
  font-size:var(--kcds-text-body)
}
.ds-material .ds-preview-settings>span {
  font-size:var(--kcds-text-site-label)
}
.ds-material #doc-content .shadow-grid {
  gap:20px
}
.ds-material #doc-content .density-split__head {
  flex-wrap:wrap;
  gap:8px
}
.ds-material #doc-content .tabs {
  flex-wrap:wrap;
  overflow:visible;
  max-width:100%
}
.ds-material #doc-content .tabs>* {
  white-space:normal;
  min-width:0
}
.ds-material #doc-content .file-row__name {
  white-space:normal;
  overflow-wrap:anywhere
}
}
@media(prefers-reduced-motion:reduce) {
.material *,
 .ds-material * {
  scroll-behavior:auto!important;
  animation-duration:.01ms!important;
  animation-iteration-count:1!important;
  transition-duration:.01ms!important
}
}
.material,.ds-material {
  font-family:var(--kcds-font-site)
}
#doc-content {
  font-family:var(--kcds-font-specimen)
}
[hidden] {
  display:none!important
}
.ds-material.ds-get-started {
  overflow-x:clip
}
}
@layer site {
/* Dedicated error page uses the same theme and typography as the portal. */
.error-page {
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  padding:0 clamp(20px,6vw,88px);
  margin:0;
  color:var(--kcds-color-text-primary);
  background:var(--kcds-color-surface-canvas)
}
.error-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:28px 0
}
.error-header>a {
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:700;
  font-size:16px
}
.error-header button {
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  background:transparent;
  border:1px solid var(--kcds-color-border-subtle);
  border-radius:50%
}
.error-page svg {
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.75;
  stroke-linecap:round;
  stroke-linejoin:round
}
.error-layout {
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:32px 0 64px
}
.error-code {
  font-size:clamp(100px,17vw,220px);
  font-weight:800;
  line-height:1;
  letter-spacing:-.08em;
  color:var(--kcds-orange-500);
  margin-bottom:24px
}
.error-eyebrow {
  font-size:14px;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:700;
  margin-bottom:16px
}
.error-layout h1 {
  font-size:clamp(38px,5vw,64px);
  font-weight:500;
  line-height:1.08;
  letter-spacing:-.05em;
  margin:0 0 24px
}
.error-layout>p:not(.error-eyebrow) {
  font-size:16px;
  line-height:1.7;
  max-width:540px
}
.error-actions {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  margin-top:20px
}
.error-actions a {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  padding:16px 24px;
  min-height:56px;
  border:1px solid var(--kcds-color-border-subtle);
  border-radius:999px;
  font-size:16px;
  font-weight:700
}
.error-actions .error-primary {
  background:var(--kcds-orange-200);
  color:var(--kcds-gray-900);
  border-color:transparent
}
.error-footer {
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:24px 0;
  border-top:1px solid var(--kcds-color-border-subtle);
  font-size:14px;
  color:var(--kcds-color-text-secondary)
}
@media(max-width:560px) {
.error-header {
  padding:20px 0
}
.error-header>a {
  font-size:14px
}
.error-header img {
  width:32px;
  height:32px
}
.error-layout {
  padding:24px 0 40px
}
.error-actions {
  width:100%
}
.error-actions a {
  width:100%
}
.error-layout>p br {
  display:none
}
.error-footer {
  flex-direction:column;
  text-align:center;
  gap:8px
}
}
}

@layer site {
  .dark .material .m-product[data-suite] { color:var(--kcds-gray-50); }
}

@layer site {
 .ds-material:has(#ds-page:not([hidden])) .ds-main { padding-inline:var(--kcds-doc-gutter); }
 .ds-material #ds-page > .ds-preview-settings { margin-top:24px; flex-shrink:0; }
 @media(max-width:760px) { .ds-material #ds-page > .ds-preview-settings { margin-top:16px; } }
 .ds-material #ds-page .ds-page-pagination::before,
 .ds-material:has(#ds-page:not([hidden])) .ds-footer::before {
  left:calc(-1 * var(--kcds-doc-gutter));right:calc(-1 * var(--kcds-doc-gutter));width:auto;transform:none;
 }
 .ds-material #ds-page .ds-page-pagination a:only-child {
  grid-column:1/-1;justify-self:end;margin-left:auto;margin-right:0;width:min(340px,100%);text-align:right;
 }
 @media(max-width:760px) { .ds-material #ds-page .ds-page-pagination a:only-child { width:100%; } }
}

@layer site {
 .material .m-product[data-suite] { color:var(--kcds-site-category-ink); }
 .dark .material .m-product[data-suite] { color:var(--kcds-gray-50); }
 .material .m-products .demo-avatar { color:var(--kcds-site-category-ink); }
 .material .studio-canvas .studio-canvas-top,
 .material .studio-canvas .studio-kicker,
 .material .studio-canvas .lab-meta,
 .material .studio-canvas .studio-token small { color:var(--kcds-site-preview-muted); }
 .material .studio-canvas .studio-canvas-top [data-lab-suite-name] { color:color-mix(in srgb,var(--lab-accent) 80%,black); }
 .material .studio-canvas.is-dark .studio-canvas-top [data-lab-suite-name] { color:var(--kcds-site-preview-ink); }
 .material .skip { color:var(--kcds-gray-900);background:var(--kcds-gray-0); }
}
@layer site {
 .material .studio-canvas .studio-example p { color:var(--kcds-site-preview-muted); }
}

@layer site {
 .ds-material .ds-skip { color:var(--kcds-gray-900);background:var(--kcds-gray-0); }
 .ds-material #doc-content .datepicker__day--muted { color:var(--kcds-color-text-secondary); }
 .ds-material #doc-content .btn--destructive,.ds-material #doc-content .badge-count--error { color:var(--kcds-gray-0); }
}
@layer site {
 @media(min-width:761px) and (max-width:1000px) {
  .ds-material:has(#ds-page:not([hidden])) .ds-shell { height:calc(100dvh - 64px); }
  .ds-material:has(#ds-page:not([hidden])) .ds-main { height:100%; }
 }
}
@layer site {
.editorial-main{margin-left:82px;padding:40px clamp(20px,5vw,80px);color:var(--kcds-color-text-primary);min-width:0}
.editorial-nav{display:flex;gap:24px;flex-wrap:wrap;margin-bottom:48px}.editorial-nav a,.editorial-main a{color:inherit}.editorial-nav a{font-size:16px}
.editorial-heading{max-width:850px;margin-bottom:40px}.editorial-main h1{font-size:clamp(36px,5vw,68px);line-height:1.12;letter-spacing:-.04em;margin:20px 0 28px}.editorial-main h2{font-size:28px;line-height:1.3;margin:32px 0 16px}.editorial-main p,.editorial-main li{font-size:17px;line-height:1.75}.editorial-main .editorial-lead{font-size:21px}.editorial-main .editorial-meta{font-size:14px}
.editorial-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.editorial-card{background:var(--kcds-color-surface-default);border:1px solid var(--kcds-color-border-subtle);border-radius:28px;overflow:hidden;text-decoration:none}.editorial-card img{width:100%;height:260px;object-fit:cover}.editorial-card>div{padding:28px}.editorial-card h2{margin:12px 0}.editorial-card:hover{outline:2px solid var(--kcds-color-text-secondary)}
.editorial-article{max-width:920px;margin:auto;overflow-wrap:anywhere}.editorial-art{width:100%;height:360px;object-fit:cover;border-radius:24px;margin:24px 0}.editorial-article section{border-top:1px solid var(--kcds-color-border-subtle);padding:24px 0}.editorial-footer{margin-top:64px;padding:24px 0;border-top:1px solid var(--kcds-color-border-subtle);font-size:14px}.history-entry{border-top:1px solid var(--kcds-color-border-subtle);padding:24px 0;scroll-margin-top:80px}.history-entry summary{font-size:20px;font-weight:700;cursor:pointer}.history-entry code{font-size:.88em}.release-link{font-size:14px;padding:8px 0}.search-result-copy{display:grid;gap:6px}.search-result-copy small{font-size:14px;line-height:1.5;font-weight:400}.search-results a{min-width:0;overflow-wrap:anywhere}.search-status{font-size:14px}
@media(max-width:760px){.editorial-main{margin-left:0;padding:88px 20px 24px}.editorial-nav{gap:16px;margin-bottom:32px}.editorial-grid{grid-template-columns:1fr}.editorial-card img{height:220px}.editorial-art{height:240px}.editorial-card>div{padding:20px}}
}
@layer site {
.news-controls{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin:0 0 24px}.news-filters{display:flex;gap:8px;flex-wrap:wrap}.news-filters a{display:flex;align-items:center;min-height:46px;padding:10px 20px;border:1px solid var(--kcds-color-border-subtle);border-radius:999px;text-decoration:none;font-size:16px;font-weight:600}.news-filters a[aria-current]{background:var(--kcds-color-text-primary);color:var(--kcds-color-surface-default)}.news-sort{position:relative;display:flex;align-items:center;gap:12px;font-size:15px}.news-sort-chevron{position:absolute;right:16px;top:50%;transform:translateY(-50%);pointer-events:none}.news-sort select{appearance:none;-webkit-appearance:none;font:inherit;padding:12px 48px 12px 16px;min-height:46px;border:1px solid var(--kcds-color-border-subtle);border-radius:12px;background:var(--kcds-color-surface-default);color:var(--kcds-color-text-primary)}.news-pagination{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:40px}.news-pagination a,.news-pagination span{min-width:46px;min-height:46px;display:flex;align-items:center;justify-content:center;padding:10px 16px;border:1px solid var(--kcds-color-border-subtle);border-radius:999px;text-decoration:none;font-size:16px}.news-pagination [aria-current]{background:var(--kcds-color-text-primary);color:var(--kcds-color-surface-default)}.news-pagination [aria-disabled]{opacity:.45}.news-count{scroll-margin-top:90px}.editorial-card[hidden],.news-sort[hidden],.news-pagination[hidden],.news-empty[hidden]{display:none}.editorial-card img{height:auto;aspect-ratio:3/2;object-fit:cover}.editorial-art{height:auto;aspect-ratio:3/2;object-fit:cover}.news-filters a:focus-visible,.news-pagination a:focus-visible,.news-sort select:focus-visible{outline:3px solid var(--kcds-color-text-primary);outline-offset:4px}#news-results:focus{outline:none}
@media(max-width:760px){.news-filters{gap:8px}.news-filters a{font-size:14px;padding:10px 14px}.news-controls{gap:16px}.news-sort{width:100%;justify-content:space-between}.news-pagination{gap:6px}.news-pagination a,.news-pagination span{padding:10px 12px;font-size:14px}.editorial-card img,.editorial-art{height:auto}}
}
@layer site {
@media(min-width:1200px){.editorial-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.editorial-card>div{padding:24px}.editorial-card h2{font-size:24px}.editorial-card p{font-size:16px}.editorial-card .editorial-meta{font-size:14px}}
}
@layer site {
.news-sort-trigger{display:flex;align-items:center;justify-content:space-between;gap:24px;min-width:170px;min-height:48px;padding:12px 16px;border:1px solid var(--kcds-color-border-subtle);border-radius:12px;background:var(--kcds-color-surface-default);color:var(--kcds-color-text-primary);font:inherit;cursor:pointer}.news-sort-trigger svg{flex:none}.news-sort-options{position:absolute;right:0;top:calc(100% + 8px);z-index:20;min-width:190px;padding:6px;border:1px solid var(--kcds-color-border-subtle);border-radius:16px;background:var(--kcds-color-surface-default);box-shadow:var(--kcds-shadow-md)}.news-sort-options button{display:block;width:100%;min-height:44px;padding:12px 14px;text-align:left;border:0;border-radius:10px;background:transparent;color:var(--kcds-color-text-primary);font:inherit;cursor:pointer}.news-sort-options button[aria-selected=true]{background:var(--kcds-color-border-subtle);font-weight:700}.news-sort-options button:hover,.news-sort-options button:focus-visible{background:var(--kcds-color-border-subtle);outline:2px solid var(--kcds-color-text-secondary);outline-offset:-2px}.news-sort-trigger:focus-visible{outline:2px solid var(--kcds-color-text-primary);outline-offset:3px}.news-sort select[hidden],.news-sort-options[hidden]{display:none}
}
/* Documentation specimens and complete v1.18 references. */
@layer site {
 .live-demo {padding:24px;margin:24px 0;border:1px solid var(--kcds-color-border-default);border-radius:16px;background:var(--kcds-color-surface-default);color:var(--kcds-color-text-primary);font-family:var(--kcds-font-specimen);font-size:16px;line-height:1.5;min-width:0}
 .live-demo h3 {margin-top:0}
 .live-demo button,.live-demo input,.live-demo textarea {font:inherit;color:inherit}
 .live-demo button {min-height:44px;padding:8px 16px;background:var(--kcds-color-surface-default);border:1px solid var(--kcds-color-border-default);border-radius:12px;cursor:pointer;white-space:normal}
 .live-demo button:hover {background:var(--kcds-color-surface-hover)}
 .live-demo button:disabled {color:var(--kcds-color-text-disabled);cursor:not-allowed}
 .live-demo :focus-visible {outline:2px solid var(--kcds-color-border-focus);outline-offset:3px}
 .live-demo [aria-pressed=true],.live-demo [aria-checked=true],.live-demo [aria-selected=true],.live-demo .is-active {background:var(--kcds-color-primary-tint);color:var(--kcds-color-on-primary-tint);border-color:var(--kcds-color-border-focus)}
 .live-demo label {display:grid;gap:8px;min-width:0;margin-bottom:12px}
 .live-demo input:not([type=checkbox]):not([type=radio]),.live-demo textarea {box-sizing:border-box;min-height:44px;padding:10px 12px;max-width:100%;width:100%;background:var(--kcds-color-surface-default);border:1px solid var(--kcds-color-border-default);border-radius:8px}
 .live-demo input[type=checkbox],.live-demo input[type=radio] {width:20px;height:20px;accent-color:var(--kcds-color-primary)}
 .live-demo input[aria-invalid=true] {border-color:var(--kcds-color-status-error)}
 .live-demo [role=alert] {color:var(--kcds-color-status-error)}
 .live-demo .demo-choice {display:flex;align-items:center;gap:12px}
 .demo-caption,.source-version,.state-plate-label {color:var(--kcds-color-text-secondary);font-size:14px;line-height:1.6}
 .demo-actions,.demo-toolbar {display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-block:16px}
 .demo-toolbar {justify-content:space-between}
 .demo-status {min-height:24px;margin-bottom:0}
 #doc-content .btn--destructive,#doc-content .badge-count--error {background:var(--kcds-red-600);color:var(--kcds-gray-0)}
 #doc-content[data-kcds-product-category=internal] .btn--primary,#doc-content[data-kcds-product-category=internal] .btn-cm--primary {color:var(--kcds-gray-950)}
 .live-demo-host > .demo-actions button {font:inherit;min-height:44px;padding:8px 16px;border:1px solid var(--kcds-color-border-default);border-radius:12px;color:var(--kcds-color-text-primary);background:var(--kcds-color-surface-default);cursor:pointer}
 .live-demo-host > .demo-actions button[aria-pressed=true] {background:var(--kcds-color-primary-tint);color:var(--kcds-color-on-primary-tint)}
 .live-demo-host [hidden] {display:none!important}
 .live-demo table {width:100%;table-layout:fixed;border-collapse:collapse}
 .live-demo th,.live-demo td {padding:12px 8px;border-bottom:1px solid var(--kcds-color-border-subtle);overflow-wrap:anywhere;text-align:start}
 .live-demo th button {padding:6px;border:0}
 .live-demo canvas {width:100%;height:180px;display:block;touch-action:none;border:1px solid var(--kcds-color-border-default);border-radius:12px;color:var(--kcds-color-text-primary);background:var(--kcds-color-surface-default)}
 .live-demo [data-state=locked] {background:var(--kcds-color-surface-subtle);padding:16px;border-radius:12px}
 .demo-picker {position:relative;max-width:400px}
 .demo-picker > button {width:100%;text-align:start;padding-inline-end:40px}
 .demo-picker > button::after {content:'⌄';position:absolute;inset-inline-end:16px}
 .demo-picker [role=listbox] {position:relative;background:var(--kcds-color-surface-elevated);border:1px solid var(--kcds-color-border-default);border-radius:12px;padding:8px;margin-top:8px}
 .demo-picker [role=option] {display:block;width:100%;text-align:start;border:0;margin-block:2px}
 .demo-dialog {width:min(480px,calc(100vw - 40px));max-height:calc(100dvh - 40px);box-sizing:border-box;padding:24px;background:var(--kcds-color-surface-default);color:var(--kcds-color-text-primary);border:1px solid var(--kcds-color-border-default);border-radius:16px}
 .demo-dialog::backdrop {background:var(--kcds-color-overlay,rgba(0,0,0,.55))}
 .demo-dialog--drawer {margin:0;margin-inline-start:auto;height:100dvh;max-height:100dvh;border-radius:16px 0 0 16px}
 .demo-dialog--sheet {margin-block-start:auto;margin-block-end:0}
 .demo-ninebox {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 .demo-ninebox button {min-height:100px}
 .demo-calendar {border:1px solid var(--kcds-color-border-default);border-radius:12px;padding:12px;margin-block:12px;background:var(--kcds-color-surface-elevated)}
 .demo-calendar [role=row] {display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;text-align:center}
 .demo-calendar [role=gridcell] button {width:100%;padding:4px;border:0;border-radius:8px}
 .demo-calendar [role=columnheader] {font-size:14px;padding-block:8px}
 .demo-calendar .demo-actions {justify-content:space-between}
 .demo-editor {min-height:140px;border:1px solid var(--kcds-color-border-default);border-radius:12px;padding:16px}
 .demo-date-axis {position:relative;min-height:56px;border-bottom:2px solid var(--kcds-color-border-default);margin-block:20px}
 .demo-date-axis button {position:absolute;inset-block-end:0;padding-inline:8px}
 .normative-source pre code {white-space:pre-wrap;overflow-wrap:anywhere}
 .live-demo [role=menu],.live-demo [role=tooltip],.live-demo [role=region] {padding:16px;margin-top:12px;border:1px solid var(--kcds-color-border-default);border-radius:12px;background:var(--kcds-color-surface-elevated)}
 .live-demo [role=menuitem] {display:block;width:100%;border:0;text-align:start}
 .live-demo-host[data-kcds-density=compact] .live-demo th,.live-demo-host[data-kcds-density=compact] .live-demo td {padding-block:6px;font-size:14px}
 .live-demo-host[data-kcds-density=compact] .live-demo button {min-height:32px;padding-block:4px}
 @media(pointer:coarse) {.live-demo-host[data-kcds-density=compact] .live-demo button {min-height:44px}}
 .normative-source {margin-block:32px;overflow-wrap:anywhere;font-size:16px;line-height:1.7}
 details.normative-source {border-top:1px solid var(--kcds-color-border-subtle);padding-top:20px}
 .normative-source summary {font-weight:700;cursor:pointer}
 .normative-source pre {white-space:pre-wrap;overflow-wrap:anywhere;max-width:100%;padding:16px;background:var(--kcds-color-surface-subtle);border-radius:12px;font-size:14px}
 .normative-table table {table-layout:fixed;width:100%;border-collapse:collapse}
 .normative-table th,.normative-table td {padding:12px;vertical-align:top;text-align:start;border-bottom:1px solid var(--kcds-color-border-subtle);overflow-wrap:anywhere}
 .normative-source blockquote {margin-inline:0;padding-inline-start:20px;border-inline-start:3px solid var(--kcds-color-border-default)}
 .reference-gallery {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-block:24px}
 .reference-gallery a {display:grid;gap:16px;padding:20px;border:1px solid var(--kcds-color-border-default);border-radius:16px;color:var(--kcds-color-text-primary);text-decoration:none}
 .reference-gallery span {font-size:14px;color:var(--kcds-color-text-link)}
 .canonical-frame {display:block;width:100%;height:720px;border:1px solid var(--kcds-color-border-default);border-radius:12px;background:var(--kcds-color-surface-default)}
 @media(max-width:760px) {
  .live-demo {padding:16px}
  .live-demo th,.live-demo td {padding:8px 4px;font-size:14px}
  .live-demo th button,.live-demo td button {padding:4px;font-size:14px}
  .live-demo .demo-table,.live-demo .demo-table tbody {display:block}
  .live-demo .demo-table thead {display:block;margin-bottom:12px}
  .live-demo .demo-table thead tr {display:flex;flex-wrap:wrap;gap:8px}
  .live-demo .demo-table thead th {border:0;padding:0}
  .live-demo .demo-table thead th:first-child,.live-demo .demo-table thead th:last-child {position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}
  .live-demo .demo-table tbody tr {display:grid;grid-template-columns:32px minmax(0,1fr);padding:12px;border:1px solid var(--kcds-color-border-subtle);border-radius:12px;margin-bottom:12px}
  .live-demo .demo-table tbody th,.live-demo .demo-table tbody td {border:0;padding:6px 0;font-size:16px}
  .live-demo .demo-table tbody td[data-label] {grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px}
  .live-demo .demo-table tbody td[data-label]::before {content:attr(data-label);color:var(--kcds-color-text-secondary);font-size:14px}
  .reference-gallery {grid-template-columns:1fr}
  .demo-ninebox {gap:4px}
  .demo-ninebox button {padding:6px;font-size:14px}
  .normative-table th,.normative-table td {padding:8px 4px;font-size:14px}
 }
}
/* Foundations: diagrams and specimens, scoped away from product components. */
@layer site {
 .fd-page {font-family:var(--kcds-font-site);min-width:0}
 .fd-page .fd-header {margin-bottom:36px;max-width:760px}
 .fd-page .fd-header h2 {font-size:clamp(32px,4vw,48px);line-height:1.12;margin:12px 0 18px}
 .fd-page .fd-header p {font-size:20px;line-height:1.5;color:var(--kcds-color-text-secondary)}
 .fd-page>h3 {font-size:24px;margin:40px 0 20px;line-height:1.3}
 .fd-page h4 {font-size:20px;line-height:1.4;margin:0 0 16px}
 .fd-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:16px;margin:20px 0}
 .fd-card {min-width:0;border:1px solid var(--kcds-color-border-subtle);border-radius:24px;padding:24px;background:var(--kcds-color-surface-default);overflow:hidden}
 .fd-card h3 {font-size:20px;line-height:1.4;margin:20px 0 8px}
 .fd-card p,.fd-page .fd-note {font-size:16px;line-height:1.65;color:var(--kcds-color-text-secondary);margin:0}
 .fd-card code {font-size:13px;overflow-wrap:anywhere;line-height:1.6}
 .fd-page .fd-note {padding:20px 0;border-bottom:1px solid var(--kcds-color-border-subtle);margin-bottom:24px}
 .fd-flow {display:grid;grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr) 24px minmax(0,1fr);gap:8px;align-items:stretch}
 .fd-connector {align-self:center;text-align:center;color:var(--kcds-color-text-secondary);font-size:24px}
 .fd-number {display:inline-grid;place-items:center;width:40px;height:40px;border:1px solid var(--kcds-color-border-subtle);border-radius:50%;font-size:14px;font-weight:700}
 .fd-flow-visual {display:flex;align-items:center;min-height:160px;margin:12px 0}
 .fd-dots {display:flex;gap:8px;flex-wrap:wrap}.fd-dots i {width:48px;height:64px;border-radius:16px}
 .fd-role {display:flex;gap:12px;align-items:center;font-weight:700;font-size:18px}
 .fd-dot {display:inline-block;width:12px;height:12px;flex:0 0 12px;border-radius:50%;background:var(--kcds-color-primary)}
 .fd-mini {width:100%;display:grid;gap:20px;font-size:16px}
 .fd-cta {display:inline-flex;align-items:center;justify-content:center;padding:14px 20px;border-radius:16px;background:var(--kcds-color-primary);color:var(--kcds-gray-950);font-size:16px;font-weight:700;line-height:1.4}
 .fd-color-field {height:112px;border-radius:16px;display:grid;place-items:center;color:var(--kcds-gray-0)}
 .fd-color-field span {font-size:48px;line-height:1;font-weight:700}
 .fd-ramp {margin:24px 0}.fd-ramp h4 {font-size:16px}.fd-ramp>div {display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}
 .fd-ramp figure {margin:0;min-width:0}.fd-ramp figure div {height:76px;border-radius:12px}.fd-ramp figcaption {font-size:14px;text-align:center;padding:8px 0}
 .fd-ui {font-family:Lato,sans-serif;border:1px solid var(--kcds-color-border-subtle);border-radius:16px;padding:24px;background:var(--kcds-color-surface-default);color:var(--kcds-color-text-primary);display:grid;gap:20px}
 .fd-ui h4,.fd-ui p {margin:0}.fd-ui h4 {font-size:24px}.fd-kicker {font-size:12px;letter-spacing:.06em;color:var(--kcds-color-text-secondary)}
 .fd-ui--compact {padding:16px;gap:12px}.fd-ui--compact .fd-list-row {padding:8px 0;font-size:14px}.fd-ui--compact .fd-cta {padding:8px 12px;border-radius:8px}
 .fd-list-row {display:flex;align-items:center;gap:12px;padding:16px 0;border-bottom:1px solid var(--kcds-color-border-subtle);font-size:16px}.fd-list-row>span:last-child {margin-left:auto}
 .fd-progress {height:12px;border-radius:99px;background:var(--kcds-color-border-subtle);overflow:hidden}.fd-progress i {display:block;height:100%;border-radius:inherit}.fd-accent-line {height:4px;border-radius:99px}
 .fd-depth {background:var(--kcds-darkgray-canvas);color:var(--kcds-gray-0);padding:24px;border-radius:24px;font-size:16px}.fd-depth>div {background:var(--kcds-darkgray-surface);padding:24px;margin-top:20px;border-radius:16px}.fd-depth>div>div {background:var(--kcds-darkgray-elevated);padding:24px;margin-top:20px;border:1px solid var(--kcds-darkgray-border-default);border-radius:12px;display:grid;gap:16px}
 .fd-aa {font:400 96px/1.1 Lato,sans-serif;margin:12px 0 24px}.fd-bold {font-weight:700}
 .fd-type-scale>div {display:grid;grid-template-columns:100px minmax(0,1fr);align-items:center;gap:24px;border-bottom:1px solid var(--kcds-color-border-subtle);padding:20px 0}.fd-type-scale span {font-size:16px;font-weight:700}.fd-type-scale small {display:block;font-size:13px;font-weight:400;color:var(--kcds-color-text-secondary)}.fd-type-scale p {font-family:Lato,sans-serif;margin:0}
 .fd-bars {border:1px solid var(--kcds-color-border-subtle);border-radius:24px;padding:24px;display:grid;gap:12px}.fd-bars>div {display:flex;align-items:center;gap:20px;padding-right:70px}.fd-bars b {flex:0 0 60px;font-size:16px}.fd-bars small {font-weight:400}.fd-bars i {display:block;height:16px;min-width:2px;background:var(--kcds-color-primary);border-radius:4px}
 .fd-padding {padding:24px;border:2px dashed var(--kcds-color-primary);border-radius:24px;display:grid;gap:24px;font-size:16px}.fd-padding>.fd-ui {max-width:600px}
 .fd-radius {height:100px;width:100%;background:var(--kcds-color-primary-fill);border:2px solid var(--kcds-color-primary)}
 .fd-nested {border:2px solid var(--kcds-color-primary);border-radius:16px;padding:8px;max-width:500px}.fd-nested>div {border:2px solid var(--kcds-color-border-default);border-radius:8px;padding:40px 16px;text-align:center;font-size:18px}.fd-nested>span {display:block;padding:16px 8px;font-size:14px}
 .fd-shadow-stage {height:160px;display:grid;place-items:center;padding:16px}.fd-shadow-stage>div {padding:32px 20px;border-radius:16px;border:1px solid var(--kcds-color-border-subtle);background:var(--kcds-color-surface-default);font-size:18px}
 .fd-controls {display:grid;gap:20px}.fd-controls>div {display:flex;align-items:center;gap:12px;font-size:14px}.fd-controls b {white-space:nowrap;font-size:14px}.fd-control,.fd-field {display:flex;align-items:center;justify-content:center;border:1px solid var(--kcds-color-border-default);border-radius:8px;padding:0 16px;font-size:16px;flex:1;min-width:0}.fd-control {background:var(--kcds-color-primary-fill)}.fd-field {min-height:28px;justify-content:flex-start}
 .fd-motion {display:grid;gap:16px}.fd-motion>div {border:1px solid var(--kcds-color-border-subtle);border-radius:20px;padding:24px;display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px}.fd-motion b {font-size:18px}.fd-motion small {display:block;font-size:14px;margin-top:4px}.fd-motion>div>div {border-bottom:1px solid var(--kcds-color-border-default);padding-bottom:8px}.fd-motion i {display:block;width:32px;height:32px;border-radius:50%;background:var(--kcds-color-primary);transition-property:margin-left;transition-timing-function:ease-out}.fd-motion>div:hover i,.fd-motion>div:focus i {margin-left:calc(100% - 32px)}
 .fd-curve {display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:24px;border:1px solid var(--kcds-color-border-subtle);border-radius:24px;padding:24px}.fd-curve svg {width:100%;fill:none;stroke:var(--kcds-color-primary);stroke-width:3}.fd-curve .fd-axis {stroke:var(--kcds-color-border-default);stroke-width:1}
 .fd-icon-stage {height:96px;display:grid;place-items:center}.fd-icon-rule {display:flex;align-items:center;gap:32px}.fd-icon-grid {flex:0 0 192px;height:192px;display:grid;place-items:center;background-image:linear-gradient(var(--kcds-color-border-subtle) 1px,transparent 1px),linear-gradient(90deg,var(--kcds-color-border-subtle) 1px,transparent 1px);background-size:8px 8px;border:1px solid var(--kcds-color-border-subtle)}.fd-icon-grid svg {width:128px;height:128px}
 .fd-ellipsis {overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0}.fd-page summary {cursor:pointer;font-size:16px}.fd-wrap {overflow-wrap:anywhere}
 .fd-page .fd-spec {margin-top:48px;border-top:1px solid var(--kcds-color-border-subtle);padding-top:24px}.fd-page .fd-spec>summary {font-size:18px;font-weight:700;padding-bottom:16px}
 @media(max-width:900px){.fd-flow{grid-template-columns:1fr}.fd-connector{transform:rotate(90deg)}.fd-flow-visual{min-height:100px}.fd-flow .fd-card{display:block}.fd-motion>div{grid-template-columns:1fr}.fd-icon-rule{flex-wrap:wrap}}
 @media(max-width:520px){.fd-card{padding:20px}.fd-ramp>div{grid-template-columns:repeat(4,minmax(0,1fr))}.fd-type-scale>div{grid-template-columns:64px minmax(0,1fr);gap:12px}.fd-curve{grid-template-columns:1fr}.fd-depth,.fd-depth>div,.fd-depth>div>div{padding:16px}.fd-ui{padding:16px}.fd-page .fd-header p{font-size:18px}}
 @media(prefers-reduced-motion:reduce){.fd-motion i{transition:none}}
}
@layer site {
 .fd-flow .fd-card {padding:24px;display:flex;flex-direction:column}
 .fd-flow .fd-number {width:32px;height:32px;flex-shrink:0}
 .fd-flow .fd-card h3 {margin:14px 0 4px;font-size:22px}
 .fd-flow .fd-flow-visual {min-height:0;flex:1;width:100%;margin:24px 0;align-items:center}
 .fd-flow .fd-card>code {border-top:1px solid var(--kcds-color-border-subtle);padding-top:14px;font-size:13px}
 .fd-token-palette,.fd-token-roles {width:100%}
 .fd-token-palette>div:not(.fd-palette-key) {margin-bottom:12px}
 .fd-token-palette>div>span {display:block;font-size:14px;margin-bottom:6px}
 .fd-token-palette>div>div {display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
 .fd-token-palette i {height:32px;border-radius:6px}
 .fd-palette-key {display:grid;grid-template-columns:repeat(4,1fr);text-align:center;font-size:13px;color:var(--kcds-color-text-secondary)}
 .fd-token-roles {display:grid;gap:12px}
 .fd-token-roles>div {display:flex;align-items:center;gap:10px;border:1px solid var(--kcds-color-border-subtle);padding:12px;border-radius:12px;min-height:52px;font-size:14px}
 .fd-token-roles i {height:24px;width:24px;flex:0 0 24px;border-radius:8px}
 .fd-token-roles b {margin-left:auto;font-size:14px;white-space:nowrap}
 .fd-tenant-preview {width:100%;border:1px solid var(--kcds-color-border-default);border-radius:16px;padding:16px;display:grid;gap:12px}
 .fd-tenant-brand {display:flex;align-items:center;gap:8px;font-size:14px}
 .fd-tenant-brand>span {display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--kcds-blue-500);color:var(--kcds-gray-0);font-weight:700}
 .fd-tenant-brand small {margin-left:auto;font-size:12px;color:var(--kcds-color-text-secondary)}
 .fd-tenant-preview p {font-size:13px;margin-top:4px}.fd-tenant-preview>strong {font-size:20px;line-height:1.3}
 .fd-tenant-preview .fd-progress {height:6px}
 .fd-tenant-action {display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--kcds-blue-500);color:var(--kcds-gray-0);padding:12px;border-radius:10px;font-size:14px;font-weight:700}
 @media(min-width:901px) and (max-width:1350px){.fd-flow .fd-card{padding:18px}.fd-token-roles>div{flex-wrap:wrap}.fd-token-roles b{margin-left:34px}.fd-tenant-brand small{display:none}}
}
@layer site {
 .fd-icon-gallery {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
 .fd-icon-gallery>div {display:flex;align-items:center;gap:16px;padding:24px;border:1px solid var(--kcds-color-border-subtle);border-radius:20px;background:var(--kcds-color-surface-default);font-size:16px}
 .fd-icon-gallery svg {width:32px;height:32px;flex:0 0 32px;color:var(--kcds-color-text-accent)}
 @media(max-width:700px){.fd-icon-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.fd-icon-gallery>div{flex-direction:column;align-items:flex-start;padding:20px;font-size:14px}}
}
@layer site {
 #iconography.fd-page>.fd-grid {grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
 #iconography.fd-page>.fd-grid .fd-card {padding:18px}
 #iconography .fd-icon-stage {height:72px}
 #iconography.fd-page>.fd-grid .fd-card p {font-size:14px}
 @media(max-width:600px){#iconography.fd-page>.fd-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
}
@layer site {
 #global-search .search-result-copy {display:block;min-width:0;width:100%}
 #global-search .search-result-copy small {display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.5;margin-top:4px}
 #global-search .search-results>a {min-width:0;padding:14px}
}
/* Tablet product stories: reserve separate space for the UI and artwork. */
@layer site {
 @media(min-width:761px) and (max-width:1400px) {
  .material .m-products .m-product-detail {display:flex;flex-direction:column;align-items:stretch;padding:32px;gap:28px;min-height:0}
  .material .m-products .m-detail-copy {padding:0;max-width:680px}
  .material .m-products .m-detail-copy h3 {margin:16px 0 20px}
  .material .m-products .m-detail-copy p {max-width:580px}
  .material .m-products .m-product-list {margin:20px 0}
  .material .m-products .m-suite-scene {position:relative;inset:auto;display:grid;grid-template-columns:minmax(240px,.85fr) minmax(0,1.35fr);align-items:center;gap:24px;width:100%;min-height:0;margin:0;padding:0}
  .material .m-products .m-suite-scene .m-demo-card {position:relative;grid-column:1;grid-row:1;inset:auto;width:100%;max-width:360px;margin:0;transform:none;box-sizing:border-box;z-index:1;justify-self:center}
  .material .m-products .m-suite-scene>img[src$="-cutout.webp"],
  .dark .material .m-products .m-suite-scene>img[src$="-cutout.webp"] {position:relative;grid-column:2;grid-row:1;inset:auto;width:100%;height:auto;max-height:390px;aspect-ratio:3/2;object-fit:contain;object-position:center;transform:none;margin:0;z-index:0;mask-image:none}
 }
 @media(min-width:761px) and (max-width:950px) {
  .material .m-products .m-product-detail {padding:24px}
  .material .m-products .m-suite-scene {grid-template-columns:minmax(240px,1fr) minmax(0,1fr);gap:12px}
  .material .m-products .m-suite-scene .m-demo-card {padding:20px}
 }
}
@layer site {
 .ds-main #ds-catalog .visual-catalog-group>div {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
 .ds-main #ds-catalog .visual-catalog-card {display:flex;flex-direction:column;gap:0;padding:0;overflow:hidden;border:1px solid var(--kcds-color-border-subtle);border-radius:24px;background:var(--kcds-color-surface-default);color:var(--kcds-color-text-primary);text-decoration:none;min-width:0;transition:box-shadow .15s,border-color .15s}
 .ds-main #ds-catalog .visual-catalog-card:hover {border-color:var(--kcds-color-border-focus);box-shadow:var(--kcds-shadow-md)}
 .ds-main #ds-catalog .visual-catalog-card:focus-visible {outline:3px solid var(--kcds-color-border-focus);outline-offset:3px}
 .catalog-specimen {height:200px;position:relative;overflow:hidden;pointer-events:none;display:grid;place-items:center;padding:20px;font-family:Lato,sans-serif;box-sizing:border-box}
 .catalog-specimen-inner {width:360px;max-height:240px;overflow:hidden;transform:scale(.7);transform-origin:center;flex-shrink:0;color:var(--kcds-color-text-primary)}
 .catalog-specimen-inner>.state-grid__demo {display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px}
 .catalog-specimen-inner .table-wrap {width:650px;transform:scale(.55);transform-origin:top left;height:220px}
 .catalog-specimen-inner .demo-pair {display:block}
 .catalog-specimen-inner .demo-pair>*:not(:first-child) {display:none}
 .catalog-specimen-inner button,.catalog-specimen-inner input {pointer-events:none}
 .ds-main #ds-catalog .catalog-card-label {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;font-size:18px;font-weight:700;border-top:1px solid var(--kcds-color-border-subtle);width:100%;box-sizing:border-box}
 .catalog-card-label svg {width:18px;height:18px;flex-shrink:0}
 .ds-main #ds-catalog .visual-catalog-group>h2 {font-size:26px;margin:36px 0 20px}
 .ds-catalog-filters {flex-wrap:wrap}
 .ds-main #doc-content .state-plate-label {display:none}
 .ds-main #doc-content .density-split__head {padding:18px 22px}
 .ds-main #doc-content .density-split__name {font-size:18px}
 .ds-main #doc-content .density-split__name-tag {font-size:12px;opacity:.75}
 .ds-main #doc-content .density-split__body {padding:24px}
 .ds-main #doc-content .state-grid__demo {gap:16px;min-width:0}
 @media(max-width:1250px){.ds-main #ds-catalog .visual-catalog-group>div{grid-template-columns:repeat(2,minmax(0,1fr))}}
 @media(max-width:650px){.ds-main #ds-catalog .visual-catalog-group>div{grid-template-columns:1fr}.catalog-specimen{height:180px}.ds-main #doc-content .density-split__body{padding:18px}}
}
@layer site {
 #ds-catalog {min-width:0;max-width:100%;box-sizing:border-box}
 .catalog-specimen {width:100%;min-width:0;contain:layout paint}
 .catalog-specimen-inner {position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.7)}
 .ds-main #ds-catalog .visual-catalog-card {width:100%;box-sizing:border-box}
 .ds-main #ds-catalog .ds-catalog-filters {display:flex;flex-wrap:wrap;max-width:100%;background:transparent;gap:8px;padding:0}
 .ds-main #ds-catalog .ds-catalog-filters button {white-space:normal;flex:0 1 auto;font-size:14px;border-radius:99px;border:1px solid var(--kcds-color-border-subtle)}
}
@layer site {
 body:has(#ds-catalog:not([hidden])) {overflow-x:clip}
 #ds-catalog .ds-preview-settings {margin:20px 0;max-width:100%;box-sizing:border-box}
 .catalog-specimen-inner .density-split__body {padding:0}
}
@layer site {
 .mobile-gallery-link {display:block;padding:16px;font-size:16px;font-weight:700;color:inherit;text-decoration:none;border-bottom:1px solid var(--kcds-color-border-subtle)}
 #ds-catalog .visual-catalog-group {border-top:0;margin-top:28px;padding-top:0}
 @media(max-width:760px){body:has(#ds-catalog:not([hidden])) .ds-main {padding-top:24px}}
}
@layer site {
 .layouts-main {max-width:1600px;min-width:0}
 .layout-jump {display:flex;gap:12px;flex-wrap:wrap;margin:28px 0 48px}
 .layout-jump a,.layout-devices button {padding:12px 18px;border:1px solid var(--kcds-color-border-default);border-radius:99px;color:inherit;text-decoration:none;background:var(--kcds-color-surface-default);font:inherit;font-size:16px}
 .layout-collection {margin:48px 0;scroll-margin-top:90px}
 .layout-collection>h2,.layout-principle>h2 {font-size:clamp(28px,3vw,40px);line-height:1.15;margin-bottom:12px}
 .layout-collection>p {font-size:18px;color:var(--kcds-color-text-secondary);margin-bottom:24px}
 .layout-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
 .layout-choice {min-width:0;border:1px solid var(--kcds-color-border-subtle);border-radius:24px;text-decoration:none;color:var(--kcds-color-text-primary);overflow:hidden;background:var(--kcds-color-surface-default)}
 .layout-choice:hover,.layout-choice[aria-current] {border-color:var(--kcds-color-border-focus);box-shadow:var(--kcds-shadow-sm)}
 .layout-choice-copy {padding:24px}.layout-choice-copy>span {font-size:14px;color:var(--kcds-color-text-secondary)}
 .layout-choice h3 {display:flex;justify-content:space-between;gap:12px;font-size:22px;line-height:1.3;margin:10px 0}
 .layout-choice p {font-size:16px;line-height:1.6;color:var(--kcds-color-text-secondary);margin:0}
 .layout-map {position:relative;height:216px;margin:24px 24px 0;border:1px solid var(--kcds-color-border-default);border-radius:12px;overflow:hidden;background:var(--kcds-color-surface-canvas)}
 .map-top {height:30px;background:var(--kcds-color-surface-default);border-bottom:1px solid var(--kcds-color-border-subtle);display:flex;align-items:center;gap:8px;padding:0 10px}.map-top b {width:14px;height:14px;background:var(--kcds-color-primary);border-radius:5px;margin-right:auto}.map-top i {width:24px;height:5px;background:var(--kcds-color-border-default);border-radius:4px}
 .map-side {position:absolute;top:30px;bottom:0;left:0;width:46px;padding:14px 8px;background:var(--kcds-color-surface-default);border-right:1px solid var(--kcds-color-border-subtle);display:flex;flex-direction:column;gap:14px}.map-side i {height:5px;border-radius:4px;background:var(--kcds-color-border-default)}.map-side i:first-child {background:var(--kcds-color-primary)}
 .map-work {position:absolute;inset:44px 12px 12px;display:flex;flex-direction:column;gap:12px}.map-side+.map-work {left:60px}
 .map-banner {height:62px;border-radius:8px;background:var(--kcds-color-primary-fill);border:1px solid var(--kcds-color-border-subtle)}
 .map-tiles {display:flex;gap:8px;flex:1}.map-tiles i {flex:1;border:1px solid var(--kcds-color-border-subtle);border-radius:8px;background:var(--kcds-color-surface-default)}
 .map-columns {display:flex;gap:8px;height:100%}.map-columns>div {flex:1;display:flex;flex-direction:column;gap:8px}.map-columns i {height:40px;background:var(--kcds-color-surface-default);border-radius:6px;border-top:4px solid var(--kcds-color-primary-fill)}
 .map-authoring .map-work {flex-direction:row}.map-canvas {display:grid;place-items:center;flex:1;background:var(--kcds-color-surface-default);border:1px solid var(--kcds-color-border-subtle);border-radius:6px}.map-canvas span {font-size:36px;color:var(--kcds-color-text-primary)}.map-properties {width:34px;display:grid;gap:12px}.map-properties i {background:var(--kcds-color-border-subtle);border-radius:4px}
 .map-messages {display:flex;flex-direction:column;gap:14px;flex:1}.map-messages i {height:24px;width:75%;background:var(--kcds-color-primary-fill);border-radius:8px}.map-messages i:nth-child(2) {align-self:flex-end;background:var(--kcds-color-surface-default);border:1px solid var(--kcds-color-border-subtle)}.map-composer {height:30px;border:1px solid var(--kcds-color-border-default);background:var(--kcds-color-surface-default);border-radius:8px}
 .map-assistant .map-work {left:50%;border-left:1px solid var(--kcds-color-border-default);padding-left:12px}.map-assistant .map-side {width:38%}
 .map-steps {display:flex;gap:16px}.map-steps i {width:18px;height:18px;border-radius:50%;background:var(--kcds-color-border-default)}.map-steps i:first-child {background:var(--kcds-color-primary)}
 .map-form {display:grid;gap:12px;flex:1;padding:12px;border-radius:8px;background:var(--kcds-color-surface-default)}.map-form i {height:20px;border:1px solid var(--kcds-color-border-default);border-radius:5px}.map-record {height:36px;background:var(--kcds-color-primary-fill);border-radius:8px}
 .layout-viewer {border:1px solid var(--kcds-color-border-default);border-radius:28px;padding:28px;scroll-margin-top:80px;min-width:0;margin:56px 0}
 .layout-viewer-heading {display:flex;justify-content:space-between;gap:20px;align-items:center;flex-wrap:wrap}.layout-viewer h2 {font-size:32px;margin:8px 0}.layout-viewer-heading a {font-size:16px;color:var(--kcds-color-text-link)}
 #layout-kind,#layout-description {color:var(--kcds-color-text-secondary);font-size:16px;line-height:1.6}#layout-zones {list-style:none;padding:0;display:flex;gap:20px;flex-wrap:wrap;font-size:14px}
 .layout-devices {display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:24px 0}.layout-devices button {cursor:pointer}.layout-devices button[aria-pressed=true] {background:var(--kcds-color-text-primary);color:var(--kcds-color-surface-default)}#layout-size {margin-left:auto;font-size:14px;color:var(--kcds-color-text-secondary)}
 .layout-preview-stage {width:100%;min-width:0;overflow:hidden;border:1px solid var(--kcds-color-border-subtle);border-radius:16px;background:var(--kcds-color-surface-canvas)}.layout-preview-fit {margin:auto;position:relative;overflow:hidden}.layout-preview-fit iframe {display:block;border:0;max-width:none;transform-origin:top left;background:var(--kcds-color-surface-default)}
 .layout-preview-note {font-size:14px;line-height:1.6;color:var(--kcds-color-text-secondary)}.layout-principle {margin:56px 0}.layout-principle>p {font-size:18px;line-height:1.6;max-width:850px}.layout-principle-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:24px}.layout-principle-grid article {padding:24px;border:1px solid var(--kcds-color-border-subtle);border-radius:20px}.layout-principle-grid h3 {font-size:20px}.layout-principle-grid p {font-size:16px;line-height:1.6}
 @media(max-width:1100px){.layout-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.layout-principle-grid{grid-template-columns:1fr}}
 @media(max-width:650px){.layout-grid{grid-template-columns:1fr}.layout-viewer{padding:16px}.layout-viewer h2{font-size:26px}.layout-devices button{font-size:14px;padding:10px 14px}.layout-map{height:190px}.layout-choice-copy{padding:20px}}
}