:root { color-scheme: light; font-family: "Segoe UI", system-ui, sans-serif; --hf-ink:#352a40; --hf-muted:#756d7e; --hf-purple:#6d50b6; --hf-pink:#dc6686; --hf-line:#e9e2ea; --hf-paper:#fffaf6; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; }
.site-header { min-height:76px; padding:10px 28px; display:flex; gap:24px; align-items:center; justify-content:space-between; background:#fffaf6; color:var(--hf-ink); border-bottom:1px solid var(--hf-line); }
.site-brand { display:flex; gap:10px; align-items:center; color:inherit; text-decoration:none; font-size:21px; font-weight:750; letter-spacing:-.6px; }
.site-brand small { display:block; margin-top:1px; color:var(--hf-muted); font-size:10px; font-weight:500; letter-spacing:1.1px; }
.heart-mark { width:40px; height:40px; display:grid; place-items:center; background:#f9e3e9; color:#ba4a70; border-radius:14px; font-size:23px; transform:rotate(-7deg); }
.product-switch { display:flex; gap:4px; padding:4px; border:1px solid var(--hf-line); border-radius:999px; background:#fff; }
.product-switch a { display:flex; align-items:center; justify-content:center; min-height:44px; padding:8px 18px; border-radius:999px; text-decoration:none; color:var(--hf-muted); font-size:13px; font-weight:650; white-space:nowrap; }
.product-switch a[aria-current="page"] { background:#eee7f7; color:#60439b; }
.product-switch a:hover { background:#f7f2fb; }
.site-status { padding-left:12px; color:var(--hf-muted); font-size:12px; white-space:nowrap; }
.site-status::before { content:""; display:inline-block; margin-right:7px; width:6px; height:6px; border-radius:50%; background:#81a997; }
button, input, a, summary { -webkit-tap-highlight-color:transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visible { outline:3px solid #a089d4; outline-offset:3px; }
button:disabled { opacity:.55; cursor:not-allowed; }
@media(max-width:700px) { .site-header { min-height:104px; padding:12px 16px 10px; gap:10px; flex-wrap:wrap; } .site-brand { font-size:20px; } .heart-mark { width:34px; height:34px; font-size:21px; } .site-status { font-size:10px; } .product-switch { order:3; width:100%; padding:3px; } .product-switch a { width:50%; min-height:44px; font-size:12px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.001ms !important; transition-duration:.001ms !important; } }
:root { --recipe-ink: #443540; }
.recipe-dialog { width: min(520px, calc(100% - 32px)); max-height: calc(100dvh - 32px); box-sizing: border-box; overflow: hidden; padding: 24px; border: 1px solid #e3d5cc; border-radius: 22px; color: var(--recipe-ink); background: #fffaf6; box-shadow: 0 24px 80px #38232e33; }
.recipe-dialog[open] { display: flex; flex-direction: column; }
.recipe-body { min-height: 0; overflow-y: auto; padding: 0 4px 12px 0; overscroll-behavior: contain; }
.recipe-heading, .recipe-footer { flex-shrink: 0; }
.recipe-body h3 { margin: 16px 0 8px; font-size: 14px; }
.recipe-adjustments { padding: 0 12px 4px; border: 1px solid #edc8ce; border-radius: 12px; background: #fff0f2; }
.recipe-adjustments h3 { color: #9b3d4e; }
.recipe-footer { padding-top: 12px; border-top: 1px solid #e3d5cc; background: #fffaf6; }
.recipe-dialog::backdrop { background: #38232e66; }
.recipe-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.recipe-heading h2 { margin: 0; font-size: 24px; }
.recipe-dialog button { min-height: 44px; padding: 10px 14px; border: 1px solid #decfc7; border-radius: 12px; background: #fff; color: inherit; font: inherit; cursor: pointer; }
.recipe-dialog button:disabled { opacity: .5; cursor: default; }
.recipe-dialog p { line-height: 1.5; }
#recipe-filename { overflow-wrap: anywhere; font-size: 13px; }
#recipe-status { font-size: 14px; }
#recipe-status.is-error, .recipe-changes { color: #9b3d4e; }
.recipe-summary, .recipe-changes { padding-left: 22px; font-size: 14px; line-height: 1.6; }
.recipe-summary:empty, .recipe-changes:empty { display: none; }
.recipe-boundary { margin: 0 0 10px; font-size: 12px; color: #75636c; }
.recipe-actions { display: flex; justify-content: flex-end; gap: 10px; }
#recipe-apply { background: #704458; color: #fff; border-color: #704458; }
.recipe-open-button { min-height: 44px; margin-top: 12px; padding: 8px 12px; border: 1px solid #dacbc4; border-radius: 10px; background: transparent; color: #66505c; font: inherit; font-size: 13px; cursor: pointer; }
@media (max-width: 420px) { .recipe-dialog { padding: 18px; } .recipe-actions { justify-content: stretch; } .recipe-actions button { flex: 1; } }
.draft-notice { display:flex; align-items:center; gap:12px; margin:0 0 18px; padding:10px 12px; border:1px solid #e9e2ea; border-radius:12px; background:#fbf6f2; }
.draft-notice p { flex:1; margin:0; color:#75636c; font-size:11px; line-height:1.5; }
.draft-notice p.is-warning { color:#9b3d4e; }
.draft-notice button { flex:none; min-height:44px; padding:8px 10px; border:1px solid #dacbc4; border-radius:10px; background:#fffaf6; color:#66505c; font:inherit; font-size:11px; cursor:pointer; }
.draft-review-status { margin:12px 0; padding:10px 12px; border:1px solid #edc8ce; border-radius:10px; background:#fff0f2; color:#9b3d4e; font-size:12px; line-height:1.5; }