.recipe-illustration { width:100%; height:100%; object-fit:cover; display:block; }
.illustrated-note { min-width:0; }
.draft-status-note { color:#75531d; background:#fff4df; border-left:3px solid #bc9153; border-radius:8px; padding:12px 14px; margin:14px 0 20px; font-size:14px; font-weight:600; line-height:1.7; overflow-wrap:anywhere; }
.library-entry .library-draft-state { color:#75531d; font-weight:600; margin-top:7px; }
.note-intro { font-size:12px; color:#78866c; line-height:1.8; margin:6px 0 16px; }
.note-page-heading { display:flex; justify-content:space-between; gap:12px; color:#637d50; font-size:12px; padding:12px 0; }
.note-stage { touch-action:pan-y; min-width:0; }
.note-slide { background:#fffefa; border:1px solid #e6e9de; border-radius:18px; padding:17px; min-height:310px; overflow-wrap:anywhere; }
.note-slide h2 { font-size:calc(21px * var(--reading-scale,1)); line-height:1.5; margin:0 0 15px; }
.note-slide>p { font-size:calc(16px * var(--reading-scale,1)); line-height:1.85; margin:14px 0; }
.note-step-photo { width:100%; height:auto; max-height:55dvh; object-fit:contain; display:block; border-radius:12px; background:#f9f6ef; }
.note-help { padding:13px 14px; border-radius:12px; margin-top:15px; background:#f0f4e9; }
.note-help h3 { margin:0 0 6px; font-size:calc(13px * var(--reading-scale,1)); }
.note-help p { margin:0; font-size:calc(13px * var(--reading-scale,1)); line-height:1.8; color:#58684e; }
.note-ingredients,.note-tools,.note-references { list-style:none; margin:0; padding:0; }
.note-ingredients li { padding:13px 0; border-bottom:1px solid #e8ebdf; }
.note-ingredients li>div { display:flex; justify-content:space-between; gap:12px; font-size:15px; }
.note-ingredients strong { white-space:nowrap; font-size:14px; }
.note-ingredients small { display:block; color:#74806b; font-size:12px; line-height:1.8; margin-top:6px; }
.note-tools li { padding:11px 0; border-bottom:1px solid #e8ebdf; font-size:15px; }
.note-references li { margin:17px 0; font-size:13px; line-height:1.8; }
.note-references a { text-decoration:underline; text-underline-offset:3px; color:#486b3d; }
.note-references p { margin-top:7px; color:#74806b; font-size:12px; }
.note-controls { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:7px; padding-top:16px; }
.note-controls button { background:#e8efdd; border:1px solid #dae4cd; border-radius:10px; padding:11px 10px; min-height:44px; font-size:12px; }
.note-dots { display:flex; flex-wrap:wrap; justify-content:center; gap:3px; }
.note-dots span { width:4px; height:4px; background:#d5dfc8; border-radius:50%; }
.note-dots span.current { background:#567b43; width:8px; }
.note-swipe-hint { text-align:center; font-size:11px; color:#87927d; margin:12px 0 17px; }
.note-shortcuts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.note-shortcuts button { min-height:44px; padding:10px 5px; font-size:12px; border:1px solid #dbe4d1; border-radius:10px; }
.illustrated-page .page-header .header-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.library-entry { margin-top:2px; }
@media(max-width:350px) { .note-slide { padding:12px; } .note-slide h2 { font-size:calc(19px * var(--reading-scale,1)); } }