*{
  box-sizing:border-box}
html{
  scroll-padding-top:calc(var(--header) + var(--size-24))}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:var(--text-body)/var(--leading-body) var(--font-sans);
  -webkit-font-smoothing:antialiased}
button,input,select{
  font:inherit}
button,a,input,summary,select{
  -webkit-tap-highlight-color:transparent}
a{
  color:var(--accent);
  text-underline-offset:var(--size-3)}
button,summary{
  cursor:pointer}
button{
  color:inherit}
a:hover{
  text-decoration-thickness:var(--size-2)}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible,select:focus-visible,[tabindex="0"]:focus-visible{
  outline:var(--size-3) solid var(--focus);
  outline-offset:var(--size-4)}
h1:focus,#main:focus{
  outline:none}
[hidden]{
  display:none!important}
img{
  max-width:100%}
.muted{
  color:var(--muted)}
.skip-link{
  position:fixed;
  top:var(--size-minus-100);
  left:var(--size-16);
  z-index:99;
  background:var(--surface);
  padding:var(--size-12)}
.skip-link:focus{
  top:var(--size-12)}

.site-header{
  height:var(--header);
  background:var(--surface);
  border-bottom:var(--size-1) solid var(--line);
  position:sticky;
  top:0;
  z-index:20}
.header-inner{
  max-width:var(--size-1480);
  margin:auto;
  height:100%;
  display:flex;
  gap:var(--size-24);
  align-items:center;
  padding:0 var(--size-40)}
.brand{
  font-size:var(--size-27);
  font-weight:800;
  letter-spacing:var(--size-minus-1p4);
  color:var(--accent);
  text-decoration:none;
  line-height:1}
.brand span{
  color:var(--coral)}
.header-recipes{
  margin-left:auto;
  font-size:var(--size-14);
  color:var(--text);
  text-decoration:none}
.theme-toggle{
  border:var(--size-1) solid var(--control-border);
  border-radius:var(--size-6);
  background:var(--surface);
  font-size:var(--size-13);
  padding:var(--size-8) var(--size-12);
  min-height:var(--size-40)}

.layout{
  max-width:var(--size-1480);
  margin:auto;
  display:grid;
  grid-template-columns:var(--size-244) minmax(0,1fr);
  gap:var(--size-48);
  padding:0 var(--size-40)}
.sidebar{
  position:sticky;
  top:var(--header);
  height:calc(100dvh - var(--header));
  overflow-y:auto;
  padding:var(--size-32) 0 var(--size-24);
  border-right:var(--size-1) solid var(--line)}
.sidebar>summary{
  display:none}
.sidebar-inner{
  padding-right:var(--size-24)}
.search-label{
  display:block;
  font-size:var(--size-12);
  color:var(--muted);
  margin-bottom:var(--size-7)}
input[type=search]{
  width:100%;
  min-width:0;
  border:var(--size-1) solid var(--control-border);
  background:var(--surface);
  border-radius:var(--size-6);
  padding:var(--size-10) var(--size-12);
  color:var(--text);
  line-height:1.4;
  min-height:var(--size-44)}
.nav-section{
  margin-top:var(--size-26)}
.nav-section h2{
  font-size:var(--size-12);
  font-weight:650;
  letter-spacing:0;
  color:var(--muted);
  margin:0 0 var(--size-8) var(--size-10);
  text-transform:none}
.nav-section a{
  display:block;
  padding:var(--size-8) var(--size-10);
  line-height:1.4;
  border-radius:var(--size-5);
  font-size:var(--size-14);
  text-decoration:none;
  color:var(--muted);
  margin:var(--size-2) 0}
.nav-section a:hover{
  background:var(--slot);
  color:var(--text)}
.nav-section a[aria-current=page]{
  background:var(--tint);
  color:var(--accent);
  font-weight:650}
.sidebar-foot{
  font-size:var(--size-12);
  color:var(--muted);
  border-top:var(--size-1) solid var(--line);
  padding-top:var(--size-20);
  margin-top:var(--size-30);
  line-height:1.6}

main{
  min-width:0;
  padding:var(--size-44) 0 var(--size-36)}
#page-content{
  position:relative;
  padding-right:var(--size-202)}
.page-header,.prose,.page-pagination,.article-footer{
  max-width:var(--measure)}
.breadcrumb{
  margin:0 0 var(--size-12);
  color:var(--muted);
  font-size:var(--size-13)}
.breadcrumb span{
  padding:0 var(--size-8);
  color:var(--muted)}
.breadcrumb a{
  text-decoration:none;
  color:var(--muted)}
.page-header h1{
  font-size:var(--text-title);
  line-height:1.15;
  font-weight:700;
  letter-spacing:var(--tracking-title);
  margin:0 0 var(--size-16);
  text-wrap:balance}
.page-meta{
  font-size:var(--size-12);
  color:var(--muted);
  margin:0 0 var(--size-34)}
.toc{
  position:sticky;
  top:calc(var(--header) + var(--size-36));
  float:right;
  width:var(--size-170);
  margin-right:var(--size-minus-202);
  max-height:calc(100dvh - var(--header) - var(--size-70));
  overflow:auto;
  font-size:var(--size-12)}
.toc>summary{
  font-size:var(--size-12);
  font-weight:650;
  color:var(--text);
  list-style:none;
  margin-bottom:var(--size-14);
  cursor:default}
.toc a{
  display:block;
  padding:var(--size-5) 0;
  color:var(--muted);
  text-decoration:none;
  line-height:1.5}
.toc a:hover{
  color:var(--accent)}
.toc .subheading{
  padding-left:var(--size-12)}
.prose{
  overflow-wrap:anywhere}
.prose>p:first-child{
  font-size:var(--size-18);
  line-height:1.7;
  color:var(--text);
  margin-top:0}
.prose p{
  max-width:var(--measure);
  margin:0 0 var(--size-20)}
.prose h2{
  font-size:var(--size-26);
  letter-spacing:var(--size-minus-p55);
  line-height:1.3;
  margin:var(--size-42) 0 var(--size-18);
  padding-top:var(--size-8);
  text-wrap:balance}
.prose h3{
  font-size:var(--size-19);
  line-height:1.4;
  margin:var(--size-28) 0 var(--size-12)}
.prose h4{
  font-size:var(--size-16);
  margin:var(--size-24) 0 var(--size-10)}
.prose ul,.prose ol{
  padding-left:var(--size-24);
  margin:0 0 var(--size-22)}
.prose li{
  margin:var(--size-7) 0;
  padding-left:var(--size-3)}
.prose li>p{
  margin-bottom:var(--size-8)}
.prose strong{
  font-weight:650}
.prose hr{
  border:0;
  border-top:var(--size-1) solid var(--line);
  margin:var(--size-30) 0}
.prose blockquote{
  margin:var(--size-24) 0;
  padding:var(--size-16) var(--size-20);
  background:var(--tint);
  border-radius:var(--size-6);
  color:var(--text);
  font-size:var(--size-14)}
.prose blockquote p:last-child{
  margin-bottom:0}
.prose code{
  font: .86em/1.5 var(--font-mono);
  background:var(--slot);
  border-radius:var(--size-3);
  padding:var(--size-2) var(--size-5);
  overflow-wrap:anywhere}
.prose pre{
  background:var(--surface);
  border:var(--size-1) solid var(--line);
  border-radius:var(--size-6);
  padding:var(--size-20);
  overflow:auto;
  max-width:100%;
  font-size:var(--size-13);
  tab-size:4}
.prose pre code{
  padding:0;
  background:none;
  overflow-wrap:normal}
.prose img{
  height:auto;
  border-radius:var(--size-5)}
.table-scroll{
  overflow:auto;
  max-width:100%;
  border:var(--size-1) solid var(--line);
  border-radius:var(--size-6);
  margin:var(--size-22) 0;
  background:var(--surface)}
.prose table{
  border-collapse:collapse;
  font-size:var(--size-13);
  line-height:1.6;
  width:100%;
  min-width:var(--size-440)}
.prose th{
  background:var(--slot);
  text-align:left;
  font-weight:650;
  white-space:normal}
.prose td,.prose th{
  padding:var(--size-12) var(--size-14);
  border-bottom:var(--size-1) solid var(--line);
  vertical-align:top}
.prose tr:last-child td{
  border-bottom:0}
.prose table code{
  font-size:var(--size-11)}
.page-pagination{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--size-20);
  margin-top:var(--size-44);
  border-top:var(--size-1) solid var(--line);
  padding-top:var(--size-24)}
.page-pagination a{
  display:flex;
  flex-direction:column;
  text-decoration:none;
  font-size:var(--size-14);
  line-height:1.5}
.page-pagination a:last-child{
  text-align:right;
  grid-column:2}
.page-pagination small{
  color:var(--muted);
  font-size:var(--size-11);
  margin-bottom:var(--size-5)}
.article-footer{
  display:flex;
  justify-content:space-between;
  gap:var(--size-16);
  margin-top:var(--size-40);
  color:var(--muted);
  font-size:var(--size-12)}
.article-footer a{
  color:var(--muted)}
#page-status{
  color:var(--muted);
  padding:var(--size-30) 0}
.retry{
  border:var(--size-1) solid var(--line);
  background:var(--surface);
  border-radius:var(--size-5);
  padding:var(--size-8) var(--size-16);
  margin-top:var(--size-12)}

.recipe{
  margin:var(--size-28) 0 var(--size-36);
  padding:var(--size-24) 0;
  background:transparent;
  border:0;
  border-top:var(--size-1) solid var(--line);
  border-radius:0;
  overflow:hidden;
  scroll-margin-top:calc(var(--header) + var(--size-24))}
.recipe-header{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:var(--size-12);
  margin-bottom:var(--size-20)}
.recipe .recipe-title{
  font-size:var(--size-18);
  line-height:1.4;
  font-weight:650;
  margin:0;
  letter-spacing:0}
.recipe-type{
  font-size:var(--size-12);
  color:var(--muted);
  white-space:nowrap}
.craft-layout{
  display:flex;
  align-items:center;
  gap:var(--size-20);
  justify-content:center;
  padding:var(--size-4) 0 var(--size-16)}
.craft-grid{
  display:grid;
  grid-template-columns:repeat(3,var(--size-56));
  gap:var(--size-4);
  flex-shrink:0}
.craft-slot{
  width:var(--size-56);
  height:var(--size-56);
  background:var(--slot);
  border:var(--size-1) solid var(--line);
  border-radius:var(--size-4);
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden}
.craft-slot img{
  width:var(--size-34);
  height:var(--size-34);
  object-fit:contain;
  image-rendering:pixelated;
  border-radius:0}
.craft-slot.empty{
  opacity:.45}
.slot-count{
  position:absolute;
  bottom:var(--size-1);
  right:var(--size-4);
  font-size:var(--size-11);
  font-weight:700;
  color:var(--text);
  background:var(--slot);
  padding:0 var(--size-2);
  border-radius:var(--size-2);
  line-height:1.3;
  font-variant-numeric:tabular-nums}
.slot-fallback{
  font-size:var(--size-11);
  line-height:1.15;
  text-align:center;
  padding:var(--size-3);
  color:var(--muted)}
.craft-arrow{
  font-size:var(--size-25);
  color:var(--muted)}
.craft-result{
  display:flex;
  align-items:center;
  flex-direction:column;
  gap:var(--size-7);
  max-width:var(--size-125);
  text-align:center;
  font-size:var(--size-12);
  line-height:1.4}
.craft-result .craft-slot{
  background:var(--slot);
  border-color:var(--accent)}
.recipe-note{
  font-size:var(--size-12);
  color:var(--muted);
  margin:0 0 var(--size-14)!important}
.recipe .ingredient-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--size-8) var(--size-14);
  padding:var(--size-16) 0 0;
  margin:0;
  border-top:var(--size-1) solid var(--line);
  list-style:none;
  font-size:var(--size-12);
  line-height:1.4}
.recipe .ingredient-list li{
  margin:0;
  padding:0;
  display:flex;
  gap:var(--size-7);
  align-items:baseline;
  min-width:0}
.ingredient-list .quantity{
  font-weight:650;
  min-width:var(--size-22);
  font-variant-numeric:tabular-nums;
  color:var(--text)}
.ingredient-list a{
  color:var(--muted);
  text-decoration:none}
.ingredient-list a:hover{
  color:var(--accent);
  text-decoration:underline}
.recipe-facts{
  display:flex;
  flex-wrap:wrap;
  gap:var(--size-6) var(--size-16);
  font-size:var(--size-12);
  color:var(--muted);
  border-top:var(--size-1) solid var(--line);
  padding-top:var(--size-14);
  margin-top:var(--size-16)}
.recipe-facts a{
  font-size:var(--size-12)}
.process-inputs{
  display:flex;
  flex-wrap:wrap;
  gap:var(--size-4);
  max-width:var(--size-180);
  justify-content:center}
.catalog-controls{
  display:grid;
  grid-template-columns:minmax(0,1fr) var(--size-190);
  gap:var(--size-14);
  margin:var(--size-24) 0 var(--size-8)}
.catalog-controls label{
  display:block;
  font-size:var(--size-12);
  color:var(--muted)}
.catalog-controls input,.catalog-controls select{
  margin-top:var(--size-6)}
.catalog-controls select{
  border:var(--size-1) solid var(--control-border);
  border-radius:var(--size-6);
  background:var(--surface);
  color:var(--text);
  padding:var(--size-10);
  min-height:var(--size-44);
  width:100%}
.catalog-count{
  font-size:var(--size-12);
  color:var(--muted)}
.catalog-list .recipe{
  margin:var(--size-16) 0 var(--size-24)}
.home-links{
  list-style:none;
  padding:0!important}
.home-links li{
  border-bottom:var(--size-1) solid var(--line);
  padding:var(--size-16) 0!important;
  margin:0!important}
.home-links a{
  text-decoration:none;
  font-weight:600}
.visually-hidden{
  position:absolute;
  width:var(--size-1);
  height:var(--size-1);
  padding:0;
  margin:var(--size-minus-1);
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0}

@media(min-width:1440px){
  .layout{
  gap:var(--size-56);
  grid-template-columns:var(--size-250) minmax(0,1fr)}
}

@media(max-width:1180px){
  .layout{
  padding:0 var(--size-28);
  gap:var(--size-32);
  grid-template-columns:var(--size-220) minmax(0,1fr)}
#page-content{
  padding-right:0}
.toc{
  position:static;
  float:none;
  width:auto;
  margin:0 0 var(--size-28);
  padding:var(--size-14) var(--size-18);
  border:var(--size-1) solid var(--line);
  border-radius:var(--size-6);
  max-height:none;
  background:var(--surface)}
.toc>summary{
  margin:0;
  cursor:pointer;
  list-style:revert}
.toc[open]>summary{
  margin-bottom:var(--size-10)}
.toc a{
  display:inline-block;
  margin-right:var(--size-18);
  padding:var(--size-5) 0}
.toc .subheading{
  display:none}
.header-inner{
  padding:0 var(--size-28)}
}

@media(max-width:760px){
  :root{
  --header:var(--header-mobile)}
.header-inner{
  padding:0 var(--size-16);
  gap:var(--size-12)}
.brand{
  font-size:var(--size-24)}
.header-recipes{
  display:none}
.theme-toggle{
  font-size:var(--size-12);
  padding:var(--size-8) 0 var(--size-8) var(--size-12);
  min-height:var(--size-44);
  margin-left:auto;
  background:transparent;
  border:0}
.layout{
  display:block;
  padding:0 var(--size-16)}
.sidebar{
  position:static;
  height:auto;
  max-height:none;
  padding:0;
  border:0;
  border-bottom:var(--size-1) solid var(--line);
  overflow:visible}
.sidebar>summary{
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-height:var(--size-44);
  font-size:var(--size-14);
  font-weight:500;
  list-style:none}
.sidebar>summary::-webkit-details-marker{
  display:none}
.sidebar-inner{
  padding:var(--size-8) 0 var(--size-16)}
.sidebar[open]>summary span{
  transform:rotate(180deg)}
.sidebar-foot{
  display:none}
#sidebar-nav{
  display:block}
.nav-section{
  margin-top:var(--size-20)}
.nav-section a{
  min-height:var(--size-44);
  display:flex;
  align-items:center}
.search-label{
  font-size:var(--size-13)}
main{
  padding:var(--size-22) 0}
.breadcrumb{
  display:none}
.page-header h1{
  font-size:var(--size-30);
  letter-spacing:var(--size-minus-p6);
  margin-bottom:var(--size-12)}
.page-meta{
  font-size:var(--size-11);
  margin-bottom:var(--size-20)}
.prose>p:first-child{
  font-size:var(--size-16);
  line-height:1.65}
.prose{
  font-size:var(--size-16)}
.prose h2{
  font-size:var(--size-22);
  margin:var(--size-28) 0 var(--size-14)}
.prose h3{
  font-size:var(--size-18)}
.toc{
  margin-bottom:var(--size-20);
  padding:var(--size-10) 0;
  background:transparent;
  border:0;
  border-bottom:var(--size-1) solid var(--line);
  border-radius:0}
.toc>summary{
  font-size:var(--size-13);
  min-height:var(--size-24)}
.toc a{
  display:block;
  min-height:var(--size-44);
  line-height:1.8}
.recipe,.catalog-list .recipe{
  padding:var(--size-18) 0 0;
  margin:var(--size-22) 0;
  background:transparent;
  border:0;
  border-top:var(--size-1) solid var(--line);
  border-radius:0}
.recipe-header{
  align-items:flex-start;
  flex-direction:column;
  gap:var(--size-4);
  margin-bottom:var(--size-16)}
.craft-layout{
  gap:var(--size-14)}
.recipe .ingredient-list{
  font-size:var(--size-12)}
.page-pagination{
  gap:var(--size-14);
  margin-top:var(--size-28)}
.table-scroll{
  border-radius:0}
.prose td,.prose th{
  padding:var(--size-10) var(--size-12)}
.catalog-controls{
  grid-template-columns:1fr;
  gap:var(--size-10);
  margin-top:var(--size-18)}
.catalog-controls input,.catalog-controls select{
  font-size:var(--size-16)}
}

@media(max-width:380px){
  .layout{
  padding:0 var(--size-16)}
.header-inner{
  padding:0 var(--size-16)}
.craft-grid{
  grid-template-columns:repeat(3,var(--size-47))}
.craft-slot{
  width:var(--size-47);
  height:var(--size-47)}
.craft-slot img{
  width:var(--size-30);
  height:var(--size-30)}
.craft-result{
  max-width:var(--size-88)}
.craft-layout{
  gap:var(--size-10)}
.recipe .ingredient-list{
  grid-template-columns:1fr}
.page-header h1{
  font-size:var(--size-28)}
.header-recipes{
  display:none}
.theme-toggle{
  margin-left:auto}
}

@media(prefers-reduced-motion:reduce){
  *{
  scroll-behavior:auto!important}
}

@media print{
  .site-header,.sidebar,.toc,.page-pagination,.article-footer,.catalog-controls{
  display:none}
.layout{
  display:block;
  padding:0}
main{
  padding:0}
#page-content{
  padding:0}
.recipe{
  break-inside:avoid}
.table-scroll{
  overflow:visible}
:root,:root[data-theme=dark]{
  color-scheme:light;
  --bg:var(--print-bg);
  --surface:var(--print-bg);
  --text:var(--print-text);
  --muted:var(--print-text)}
}


::selection{
  background:var(--accent);
  color:var(--bg)}

input::placeholder{
  color:var(--muted);
  opacity:1}

button:hover,.retry:hover{
  background:var(--slot)}

a:active,button:active,summary:active{
  opacity:var(--opacity-pressed)}

.theme-toggle,.retry{
  transition:transform var(--duration-feedback) var(--ease-feedback)}

.theme-toggle:active,.retry:active{
  transform:translateY(var(--press-offset))}

.toc>summary:focus-visible{
  outline:var(--focus-width) solid var(--focus);
  outline-offset:var(--focus-gap)}

@media(prefers-reduced-motion:reduce){
  .theme-toggle,.retry{
  transition:none;
  transform:none}
}