@font-face{
  font-family:Manrope;
  src:url('../assets/manrope-latin.woff2') format('woff2');
  font-weight:200 800;
  font-display:swap
}
body{
  background:#efeee7;
  color:#17201b;
  font-family:Manrope,system-ui,sans-serif;
  margin:0
}
*{
  box-sizing:border-box
}
.catalog-header,.catalog-intro,.catalog-workspace,.catalog-footer{
  padding-left:4vw;
  padding-right:4vw
}
a{
  color:inherit;
  text-decoration:none
}
button,input{
  font:inherit
}
a:focus-visible,button:focus-visible,input:focus-visible,pre:focus-visible{
  outline:2px solid #477016;
  outline-offset:4px
}
.catalog-skip{
  position:fixed;
  left:20px;
  top:-80px;
  padding:15px;
  background:#d4f879;
  z-index:99
}
.catalog-skip:focus{
  top:15px
}
.catalog-header{
  height:90px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid #c8cdc0;
  font-size:12px
}
.catalog-brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:600
}
.catalog-brand b{
  font-size:32px;
  letter-spacing:-.1em
}
.catalog-header nav{
  display:flex;
  gap:30px
}
.catalog-header a{
  padding:12px 0
}
.catalog-intro{
  padding-top:65px;
  padding-bottom:65px;
  position:relative
}
.catalog-eyebrow{
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin:0 0 18px;
  font-weight:650
}
.catalog-intro h1{
  font-size:clamp(48px,6vw,90px);
  line-height:1;
  letter-spacing:-.065em;
  font-weight:500;
  margin:0
}
.catalog-intro>p:last-child{
  position:absolute;
  right:4vw;
  bottom:65px;
  font-size:14px;
  line-height:1.7;
  color:#61685f;
  margin:0
}
.catalog-workspace{
  display:grid;
  grid-template-columns:240px minmax(0,1fr);
  gap:38px;
  border-top:1px solid #c8cdc0;
  padding-top:30px
}
.catalog-sidebar{
  position:sticky;
  top:20px;
  align-self:start;
  max-height:calc(100svh - 40px);
  display:flex;
  flex-direction:column
}
.catalog-sidebar label{
  font-size:12px;
  margin-bottom:10px;
  font-weight:650
}
.catalog-sidebar input{
  background:#fff9;
  border:1px solid #abb5a2;
  border-radius:4px;
  min-height:46px;
  padding:10px 12px;
  width:100%;
  font-size:12px;
  color:#17201b
}
.catalog-count{
  font-size:11px;
  color:#61685f;
  margin:15px 0
}
.catalog-families{
  overflow:auto;
  padding:3px 8px 8px 3px;
  scrollbar-width:thin
}
.catalog-families button{
  display:flex;
  align-items:center;
  gap:14px;
  text-align:left;
  width:100%;
  border:0;
  background:transparent;
  color:#374133;
  min-height:43px;
  padding:10px;
  font-size:12px;
  border-radius:3px;
  cursor:pointer
}
.catalog-families button[hidden]{
  display:none
}
.catalog-families button span{
  font-size:9px;
  color:#44533d
}
.catalog-families button:hover{
  background:#e0e4d8
}
.catalog-families button[aria-pressed=true]{
  background:#d4f879;
  color:#17201b;
  font-weight:650
}
.catalog-preview-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:3px 0 25px
}
.catalog-preview-head .catalog-eyebrow{
  margin-bottom:7px
}
.catalog-preview-head h2{
  font-size:26px;
  letter-spacing:-.04em;
  margin:0;
  font-weight:500
}
.catalog-preview-head>a{
  font-size:11px;
  padding:12px
}
.catalog-preview{
  background:#0e0f12;
  color:#eceae6;
  overflow:hidden;
  border-radius:5px;
  --kit-pad:clamp(24px,3vw,48px);
  --kit-display:Manrope,system-ui,sans-serif;
  --kit-body:Manrope,system-ui,sans-serif
}
.catalog-preview [data-family]{
  min-width:0
}
.catalog-preview .sec-featured{
  padding:50px var(--kit-pad);
  gap:30px
}
.catalog-preview .featured__headline{
  font-size:clamp(36px,4vw,58px)
}
.catalog-preview .featured-card__media img{
  max-height:540px;
  object-fit:cover
}
.catalog-code{
  margin-top:30px;
  padding:25px;
  background:#e2e5d9;
  border:1px solid #c8cdc0;
  border-radius:4px
}
.catalog-code>div{
  display:flex;
  align-items:center;
  justify-content:space-between
}
.catalog-code h2{
  font-size:19px;
  font-weight:550;
  letter-spacing:-.03em;
  margin:0
}
.catalog-code button{
  font-size:11px;
  padding:10px 15px;
  min-height:44px;
  border:1px solid #8d9984;
  border-radius:3px;
  background:transparent;
  color:inherit;
  cursor:pointer
}
.catalog-code p{
  font-size:12px;
  line-height:1.6;
  color:#505b48
}
.catalog-code pre{
  font-size:11px;
  line-height:1.7;
  max-height:360px;
  overflow:auto;
  white-space:pre-wrap;
  overflow-wrap:anywhere
}
.catalog-code [data-copy-status]{
  min-height:18px;
  margin-bottom:0
}
.catalog-footer{
  display:flex;
  justify-content:space-between;
  gap:25px;
  font-size:11px;
  margin-top:65px;
  padding-top:30px;
  padding-bottom:40px;
  border-top:1px solid #c8cdc0
}
@media(max-width:800px){
  .catalog-header,.catalog-intro,.catalog-workspace,.catalog-footer{
    padding-left:24px;
    padding-right:24px
  }
  .catalog-header nav{
    gap:18px
  }
  .catalog-header{
    height:76px
  }
  .catalog-intro{
    padding-top:45px;
    padding-bottom:40px
  }
  .catalog-intro>p:last-child{
    position:static;
    margin-top:24px;
    font-size:13px
  }
  .catalog-workspace{
    grid-template-columns:1fr;
    gap:28px;
    padding-top:24px
  }
  .catalog-sidebar{
    position:static;
    max-height:none
  }
  .catalog-families{
    max-height:175px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:3px
  }
  .catalog-families button{
    font-size:11px;
    padding:8px;
    gap:8px
  }
  .catalog-preview-head h2{
    font-size:23px
  }
  .catalog-preview [data-family]{
    max-width:100%
  }
  .catalog-preview .sec-featured{
    grid-template-columns:1fr;
    padding:30px 22px
  }
  .catalog-preview .featured__headline{
    font-size:34px
  }
  .catalog-code{
    padding:20px
  }
  .catalog-footer{
    flex-direction:column
  }
  .catalog-preview .sec-hero-cin{
    min-height:620px
  }
}
.catalog-preview .sec-featured{
  min-height:480px;
  align-items:center
}
.catalog-preview .featured-card{
  align-self:center
}
.catalog-preview .featured__headline{
  line-height:1.05
}
.catalog-workspace>main{
  min-width:0
}
.catalog-preview{
  width:100%;
  max-width:100%
}
.catalog-code{
  min-width:0;
  max-width:100%
}
.catalog-preview .rail{
  max-width:100%;
  overflow-x:auto
}

.recipe-browser { margin: 0 var(--page-pad, 4vw) 6rem; padding: 2rem; background: #dfE2d7; color: #22271e; border-radius: 12px; }
.recipe-browser-head { display: flex; justify-content: space-between; align-items: start; gap: 2rem; }
.recipe-browser h2 { font-size: clamp(2rem, 4vw, 4rem); letter-spacing: -.045em; font-weight: 500; margin: 0 0 1rem; }
.recipe-toolbar { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; margin: 2rem 0 1rem; align-items: end; }
.recipe-toolbar label { display: grid; gap: .5rem; }
.recipe-toolbar select, .recipe-toolbar button { min-height: 44px; font: inherit; padding: .6rem 1rem; border: 1px solid #626859; background: transparent; color: inherit; border-radius: 4px; }
.recipe-toolbar button[aria-pressed="true"] { background: #252b20; color: #f2f3e9; }
.recipe-frame-wrap { background: #c3c8b8; padding: 1rem; }
#recipe-frame { display: block; width: 100%; max-width: 100%; height: 820px; margin: auto; border: 0; background: #eeede5; }
.recipe-browser pre { white-space: pre-wrap; overflow-wrap: anywhere; }
@media(max-width:700px) { .recipe-browser { padding: 1rem; } .recipe-browser-head { display: block; } .recipe-frame-wrap { padding: 0; } }