:root{color-scheme:light;--ink: #1f1b16;--ink-soft: #4d433a;--paper: #f8f1e7;--paper-strong: #fffaf2;--accent: #c65b2a;--accent-soft: #f2c6a7;--shadow: rgba(31, 27, 22, .12)}*{box-sizing:border-box}body{margin:0;font-family:Iowan Old Style,Palatino Linotype,Book Antiqua,Palatino,URW Palladio L,serif;color:var(--ink);background:radial-gradient(circle at top left,#fff4e5,transparent 55%),radial-gradient(circle at 20% 80%,#f7d9c4,transparent 60%),linear-gradient(140deg,#fdf6ee,#f4e4d6);min-height:100vh}h1,h2,h3{font-family:Avenir Next,Futura,Gill Sans,Trebuchet MS,sans-serif;margin:0 0 .4rem;letter-spacing:.02em}h1{font-size:clamp(2rem,3vw,2.8rem)}h2{font-size:1.2rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-soft)}p{margin:0 0 1rem;line-height:1.6}.app{max-width:1100px;margin:0 auto;padding:2.5rem 1.5rem 3rem;animation:fadeUp .6s ease-out}.topbar{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:flex-start;padding-bottom:1.5rem;border-bottom:1px solid rgba(31,27,22,.08)}.eyebrow{font-size:.75rem;text-transform:uppercase;letter-spacing:.35em;color:var(--ink-soft);margin-bottom:.5rem}.subhead{max-width:520px;color:var(--ink-soft)}.topbar-meta{display:grid;gap:1rem;min-width:240px}.count{font-weight:700;font-size:1.1rem;color:var(--accent)}.search{display:grid;gap:.35rem;font-size:.75rem;text-transform:uppercase;letter-spacing:.2em;color:var(--ink-soft)}.search input{border:1px solid rgba(31,27,22,.2);border-radius:999px;padding:.7rem 1rem;background:var(--paper-strong);font-family:Avenir Next,Futura,Gill Sans,Trebuchet MS,sans-serif;font-size:.95rem}.search input:focus{outline:2px solid var(--accent);outline-offset:2px}.content{display:grid;grid-template-columns:minmax(220px,280px) minmax(0,1fr);gap:2rem;margin-top:2rem}.sidebar{background:var(--paper-strong);border-radius:20px;padding:1.5rem 1.2rem;box-shadow:0 20px 40px var(--shadow);animation:fadeUp .7s ease-out}.sidebar-header{display:flex;align-items:center;justify-content:space-between;gap:1rem}.sidebar-toggle{display:none;border:1px solid rgba(31,27,22,.2);border-radius:999px;padding:.45rem 1rem;background:var(--paper);font-family:Avenir Next,Futura,Gill Sans,Trebuchet MS,sans-serif;font-size:.7rem;text-transform:uppercase;letter-spacing:.2em;color:var(--ink-soft);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,border .15s ease}.sidebar-toggle:hover{transform:translateY(-1px);box-shadow:0 10px 18px var(--shadow);border-color:#1f1b164d}.sidebar-toggle:focus{outline:2px solid var(--accent);outline-offset:2px}.sidebar-panel{margin-top:1rem;display:grid;gap:1rem}.sidebar ul{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}.sidebar button{width:100%;text-align:left;padding:.6rem .8rem;border-radius:12px;border:1px solid transparent;background:#ffffffb3;font-family:Avenir Next,Futura,Gill Sans,Trebuchet MS,sans-serif;font-size:.95rem;cursor:pointer;transition:transform .15s ease,border .15s ease,box-shadow .15s ease}.sidebar button:hover{transform:translateY(-1px);border:1px solid rgba(31,27,22,.15);box-shadow:0 12px 18px var(--shadow)}.sidebar button.active{background:var(--accent-soft);border-color:var(--accent);font-weight:700}.recipe{background:var(--paper-strong);border-radius:24px;padding:2rem 2.3rem;box-shadow:0 20px 40px var(--shadow);animation:fadeUp .8s ease-out}.recipe h1{margin-top:0}.recipe h2{margin-top:1.8rem}.recipe ul,.recipe ol{padding-left:1.4rem}.recipe li{margin-bottom:.5rem}.empty{color:var(--ink-soft);font-style:italic}@keyframes fadeUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 900px){.content{grid-template-columns:1fr}.sidebar{order:1}.recipe{order:2}.sidebar-toggle{display:inline-flex;align-items:center;justify-content:center}.sidebar-panel{max-height:0;opacity:0;transform:translateY(-6px);overflow:hidden;margin-top:0;transition:max-height .24s ease,opacity .2s ease,transform .2s ease}.sidebar.is-open .sidebar-panel{max-height:calc(100vh - 16rem);opacity:1;transform:translateY(0);margin-top:1rem;overflow-y:auto;-webkit-overflow-scrolling:touch}.sidebar.is-collapsed .sidebar-panel{pointer-events:none}}@media (max-width: 600px){.app{padding:2rem 1rem 2.5rem}.topbar{flex-direction:column}}