:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #10151c; color: #e7edf5; } * { box-sizing: border-box; } body { margin: 0; } header { min-height: 58px; display: flex; align-items: center; justify-content: space-between; padding: 12px 24px; background: #19232e; border-bottom: 1px solid #314250; } a { color: #9ed9e8; } .brand { color: #e7edf5; font-size: 18px; font-weight: 700; text-decoration: none; } nav { display: flex; gap: 18px; } nav a[aria-current] { color: #f0c95b; } main { width: min(1100px, calc(100% - 40px)); margin: 0 auto; padding: 42px 0 80px; }.intro { max-width: 700px; }.eyebrow { color: #7fc3d5; letter-spacing: .12em; font-size: 12px; font-weight: 700; } h1 { margin: 8px 0 14px; font-size: 32px; } p { color: #b7c7d5; line-height: 1.7; } label { display: block; margin: 28px 0 6px; font-size: 13px; color: #c5d2de; } select { width: min(460px, 100%); padding: 10px; color: inherit; background: #1d2b37; border: 1px solid #3d5365; border-radius: 5px; font: inherit; }.tree { margin-top: 38px; }.tree > ul, .branch > ul { margin: 0; padding-left: 26px; list-style: none; border-left: 1px solid #3d5365; }.tree > ul { padding-left: 0; border: 0; }.branch { position: relative; margin: 10px 0; }.branch-content { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 34px; padding: 7px 10px; background: #19232e; border: 1px solid #314250; border-radius: 6px; }.item { color: #e7edf5; font-weight: 650; }.amount, .facility { color: #9fb2c1; font-size: 13px; }.recipe { border-color: #765d2d; background: #302a1e; }.cycle { color: #e9bb55; font-size: 12px; }.toggle { width: 25px; height: 25px; margin-right: 6px; padding: 0; border: 1px solid #527384; border-radius: 50%; color: #d9edf4; background: #243442; cursor: pointer; }.toggle:disabled { opacity: .35; cursor: default; }.raw { color: #78c8a8; }.loop { color: #e88497; }.empty { padding: 18px; color: #b7c7d5; background: #19232e; border-radius: 6px; } @media (max-width: 600px) { header { padding: 12px 16px; } main { width: min(100% - 28px, 1100px); padding-top: 28px; } nav { gap: 12px; font-size: 14px; } }