:root{color-scheme:dark;--paper:#141821;--ink:#e9eef8;--muted:#a8b4c9;--line:#354259;--white:#202838;--accent:#2b3950;font-family:"Geist",system-ui,sans-serif;color:var(--ink);background:var(--paper)}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0}
.wrap{max-width:760px;margin-inline:auto;padding-inline:clamp(16px,5vw,40px)}
header{background:#1a2231;color:var(--ink)}
.brand{min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:8px 20px;flex-wrap:wrap;padding-block:14px}
.brand a{font-weight:750;font-size:1.15rem;color:inherit;text-decoration:none}
.brand span{color:#d4deef;font-size:.8rem}
main{padding-block:clamp(24px,6vw,52px) 64px}
h1{margin:0 0 24px;font-family:"Instrument Serif",Georgia,serif;font-size:clamp(2rem,6.5vw,3.5rem);font-weight:500;line-height:1.08;overflow-wrap:anywhere}
.search{display:flex;align-items:center;background:var(--white);border:1px solid #647692;border-radius:12px;padding-inline:14px;gap:10px}
.search span{font-size:1.55rem}
input{width:100%;min-height:54px;border:0;background:transparent;font:inherit;color:inherit;outline:none}
.search:focus-within{outline:2px solid #9dbaff;outline-offset:2px}
.list-head{display:flex;justify-content:space-between;align-items:baseline;margin-top:30px;gap:12px}
.list-head h2{font-size:1rem;margin:0 0 12px}
#count,#empty{color:var(--muted)}
#results{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.recipe-link{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:58px;padding:12px 10px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;font-size:.94rem;font-weight:700}
.recipe-link:hover,.recipe-link:focus-visible{background:var(--accent)}
.arrow{font-size:1.2rem;color:#9dbaff}
.back{display:inline-flex;align-items:center;min-height:44px;color:#b9caff;margin-bottom:16px;font-weight:650;text-underline-offset:4px}
.block{margin-block:14px;background:var(--white);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.group-title{margin:0;padding:12px 16px;background:#263348;font-size:1.08rem}
.entry{display:grid;gap:9px;padding:13px 16px;line-height:1.52}
.entry+.entry{border-top:1px solid var(--line)}
.ingredients{list-style:none;padding:0;margin:0;font-weight:720;font-variant-numeric:tabular-nums}
.ingredients li+li{margin-top:4px}
.ingredients li,.method{white-space:pre-wrap;overflow-wrap:anywhere}
.method{margin:0}
.checklist-step .entry:not(:has(.ingredients)) > .method { text-align: center; }
.outcome{background:#263348}
.outcome .group-title{border-bottom:1px solid var(--line)}
a:focus-visible{outline:2px solid #9dbaff;outline-offset:2px}
#drink:focus{outline:none}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (min-width: 620px) {
  .checklist-step .entry:has(.ingredients):has(.method) {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    column-gap: 20px;
  }
  .checklist-step .entry:has(.ingredients) > .method { grid-column: 2; }
}


.recipe-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}
.option-field { display: grid; gap: 6px; font-weight: 650; }
.option-field select {
  min-height: 44px;
  width: 100%;
  padding: 8px;
  background: var(--white);
  color: var(--ink);
  border: 1px solid #647692;
  border-radius: 8px;
  font: inherit;
}
.option-field select:disabled { color: var(--muted); }
.original-amount { color: var(--muted); font-weight: 450; }

.checklist-step summary {
  min-height: 48px;
  cursor: pointer;
}
.checklist-step summary:focus-visible {
  outline: 2px solid #9dbaff;
  outline-offset: -3px;
}
.checklist-status {
  margin-inline-start: 12px;
  color: #86efac;
  font-size: .85rem;
  white-space: nowrap;
}
.recipe-thumbnail {
  width: 54px;
  height: 54px;
  flex: none;
  border-radius: 8px;
  object-fit: cover;
  background: var(--white);
}
.recipe-name { flex: 1; }
.recipe-photo {
  display: block;
  width: 100%;
  max-width: 540px;
  height: auto;
  margin: 24px auto 0;
  border-radius: 14px;
}

:root {
  --paper: #111620;
  --white: #1b2433;
  --line: #324158;
  --ink: #f1f4fb;
  --primary: #aec5ff;
}
body { background: radial-gradient(ellipse at 50% 0, #253650, var(--paper) 480px); }
.wrap { max-width: 990px; }
header { background: #151d2b; border-bottom: 1px solid var(--line); }
.brand a { color: var(--primary); }
h1 { font-weight: 600; letter-spacing: -.035em; text-wrap: balance; }
.search { border-radius: 18px; box-shadow: 0 8px 24px #0003; }
.search span { color: var(--primary); }
.list-head { margin-top: 34px; }
#results {
  border: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 258px), 1fr));
  gap: 12px;
}
.recipe-link {
  height: 100%;
  min-height: 90px;
  padding: 10px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 4px 12px #0002;
}
.recipe-thumbnail { width: 68px; height: 68px; border-radius: 11px; }
.recipe-name { line-height: 1.35; }
.arrow { padding-inline-end: 3px; }
#detail { max-width: 720px; margin-inline: auto; }
.recipe-options {
  padding: 12px;
  background: #182131;
  border: 1px solid var(--line);
  border-radius: 16px;
}
.option-field { color: #dce6f8; font-size: .9rem; }
.block { border-radius: 18px; box-shadow: 0 6px 18px #0002; }
.group-title { padding: 15px 16px; background: #26344b; }
.checklist-step summary {
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
}
.checklist-step summary::-webkit-details-marker { display: none; }
.checklist-step summary::after {
  content: '';
  width: 8px;
  height: 8px;
  flex: none;
  margin-inline-start: auto;
  border: solid var(--primary);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.checklist-step[open] summary::after { transform: rotate(225deg); }
.checklist-status { margin-inline-start: auto; }
.entry { padding-block: 10px; row-gap: 5px; }
.method { color: #d8e2f2; align-self: center; }
.step-actions { padding: 2px 16px 12px; }
.step-action {
  width: 100%;
  min-height: 50px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: var(--primary);
  color: #172441;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}
.step-action:hover { background: #c9d9ff; }
.step-action:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.step-action.undo { border-color: var(--line); background: transparent; color: var(--primary); }
.recipe-photo { border: 1px solid var(--line); }