@font-face{font-family:Book;src:url('./assets/reference/source-serif-4-latin-wght-normal-DMe4EKeb.woff2');font-weight:200 900;font-display:swap}@font-face{font-family:Book;src:url('./assets/reference/source-serif-4-latin-wght-italic-B-rCj6ir.woff2');font-style:italic;font-weight:200 900;font-display:swap}
:root{--ink:#26392f;--muted:#747264;--accent:#996542;--paper:#faf5e9;--line:#dbd1be;--green:#365947;--ui:'Segoe UI',sans-serif}*{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0;height:100%;overflow:hidden;background:#b9b0a2;color:var(--ink);font-family:Book,Georgia,serif}button,input,select{font:inherit}button{cursor:pointer;color:inherit;border:0;background:none}button:disabled{opacity:.3;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible,canvas:focus-visible{outline:2px solid #986844;outline-offset:4px}#book-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none}header{position:fixed;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:22px 30px;pointer-events:none;z-index:3}.brand{display:flex;align-items:center;gap:12px;text-shadow:0 1px #fff8}.brand-mark{font-size:34px;font-style:italic;border:1px solid #26392f50;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;letter-spacing:-8px;padding-right:7px}.brand-mark span{font-size:24px;margin-top:7px}.brand b{font-size:20px;font-weight:600}.brand small{display:block;font:9px var(--ui);letter-spacing:2.2px;margin-top:4px}.header-actions{display:flex;align-items:center;gap:9px;pointer-events:auto}.header-actions button,.book-controls,.cook-controls{background:#fdf9efc7;border:1px solid #fff9;backdrop-filter:blur(16px);box-shadow:0 4px 25px #42352818}.header-actions button{padding:10px 15px;border-radius:25px;font:12px var(--ui)}.header-actions button:hover{background:#fff6e9}#save-recipe{font-size:24px;width:42px;height:39px;padding:0}.location-label{position:fixed;left:32px;top:96px;font:11px var(--ui);display:grid;gap:6px;max-width:270px;pointer-events:none;color:#4f5a4e}.location-label span:first-child{text-transform:uppercase;letter-spacing:1.8px;font-weight:600}.location-label span:last-child{font-family:Book;font-style:italic;font-size:14px;opacity:.8}.scene-hint{position:fixed;right:32px;bottom:27px;font:10px var(--ui);color:#4c5147;pointer-events:none}.book-controls,.cook-controls{position:fixed;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:4px;border-radius:32px;z-index:3;white-space:nowrap}.book-controls{bottom:22px;padding:6px 10px}.book-controls button{width:37px;height:37px;border-radius:50%;font-size:21px}.book-controls button:hover,.cook-controls button:hover{background:#e9dfc9a0}.book-controls .recipe-position{width:190px;text-align:center;line-height:1.35}.recipe-position span{font:10px var(--ui);letter-spacing:1px}.recipe-position small{display:block;font-size:12px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.divider{height:21px;width:1px;background:#b9ad9860;margin:0 4px}.cook-controls{bottom:87px;padding:5px 9px;box-shadow:0 4px 12px #42352810}.cook-controls button{border-radius:20px;min-width:30px;height:30px;font-size:20px}.cook-controls .mode{font-size:12px;padding:3px 13px}.cook-controls .active{background:#365947;color:#fff8ed}#step-label{min-width:110px;max-width:200px;font:12px var(--ui);overflow:hidden;text-overflow:ellipsis}#auto-play{font-size:23px}.drawer{position:fixed;z-index:12;background:#faf5e9f7;box-shadow:0 10px 80px #252c2840;overflow:auto;backdrop-filter:blur(20px);overscroll-behavior:contain}.library{left:16px;top:16px;bottom:16px;width:min(480px,calc(100vw - 32px));border:1px solid #fff9;border-radius:12px}.drawer-head{padding:27px 26px 14px;display:flex;justify-content:space-between;align-items:start;gap:15px}.drawer small,dialog>small{font:9px var(--ui);letter-spacing:1.8px;color:var(--accent)}h1{font-size:28px;line-height:1.1;font-weight:500;margin:12px 0}.close{font:27px var(--ui);padding:0 4px;line-height:1;flex-shrink:0}.library-filters{padding:4px 26px 18px;border-bottom:1px solid var(--line)}input,select{border:1px solid var(--line);color:var(--ink);background:#fffaf1;border-radius:6px;padding:11px 12px;width:100%;font:12px var(--ui)}input{font-size:14px}.filter-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}.filter-pair label{font:10px var(--ui);display:grid;gap:5px}.library-tools{display:flex;align-items:center;gap:15px;font:10px var(--ui)}.library-tools button{padding:5px 0;font:11px var(--ui)}.library-tools button[aria-pressed=true]{color:var(--accent);font-weight:700}.library-tools span{margin-left:auto}.recipe-list{padding:9px 18px}.recipe-card{display:flex;align-items:center;width:100%;gap:14px;padding:10px 8px;text-align:left;border-bottom:1px solid #ded6c780}.recipe-card:hover{background:#e8dfcc80}.recipe-card img{height:64px;width:72px;object-fit:cover;border-radius:4px;background:#e1dfd0}.recipe-card b{display:block;font-size:16px;line-height:1.25;font-weight:500}.recipe-card small{display:block;letter-spacing:0;font:10px var(--ui);color:var(--muted);margin-top:6px}.recipe-card .number{font:9px var(--ui);color:var(--muted);margin-left:auto}#load-more{display:block;margin:10px auto 24px;border:1px solid var(--line);padding:10px 25px;border-radius:20px;font:12px var(--ui)}.veil{position:fixed;inset:0;background:#23332825;backdrop-filter:blur(3px);z-index:10}.reader{right:16px;top:16px;bottom:16px;width:min(620px,calc(100vw - 32px));border-radius:12px}.reader .drawer-head{align-items:center}.reader h1{font-size:37px;font-weight:500;line-height:1.12}.reader-content{padding:0 30px 35px}.reader-photo{width:100%;max-height:290px;object-fit:cover;border-radius:5px;margin:12px 0}.reader h2{font-weight:500;font-size:23px;margin:30px 0 10px}.reader .meta{font:11px/1.8 var(--ui);color:var(--muted)}.reader .nutrition{padding:15px;background:#e9ecdf;border-radius:4px;font:12px/1.7 var(--ui);margin:18px 0}.reader ul{padding-left:18px;font-size:15px;line-height:1.5}.reader li{margin:8px 0}.reader ol{padding-left:24px;font-size:16px;line-height:1.6}.reader ol li::marker{font-weight:600;color:var(--accent)}.reader ol li{padding-left:7px;margin:15px 0}.reader .go-step{display:block;font:10px var(--ui);color:var(--accent);padding:5px 0}.reader .step-active{background:#eae3cf;padding:14px;border-radius:5px}.reader .recipe-note{font:11px/1.7 var(--ui);color:var(--muted);border-top:1px solid var(--line);padding-top:18px}dialog{border:1px solid #e4d8bf;border-radius:10px;background:var(--paper);color:var(--ink);max-width:530px;padding:35px;font:16px/1.6 Book,Georgia,serif;box-shadow:0 20px 90px #242c2840}dialog::backdrop{background:#26342d60;backdrop-filter:blur(5px)}dialog .close{float:right}dialog h2{font-size:30px;font-weight:500;margin-top:12px}.fine{font:11px/1.7 var(--ui);color:var(--muted)}#loading{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse,#fcf8ed,#e7ddc8);z-index:20;transition:opacity .65s}.loading-mark{font:500 51px/1 Book,Georgia,serif;text-align:center}.loading-mark i{font-weight:400;font-size:65px;color:#49634c}#loading img{object-fit:contain;width:280px;height:187px;margin:15px 0 0}#loading p{font:italic 15px Book,Georgia,serif}#loading>span{font:8px var(--ui);letter-spacing:2px;color:var(--muted)}body.ready #loading{opacity:0;pointer-events:none}.toast{position:fixed;top:90px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:10px 20px;border-radius:22px;z-index:30;font:12px var(--ui)}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.empty{padding:25px;font-size:16px;color:var(--muted)}
@media(max-width:900px){.brand b{font-size:16px}.brand small{font-size:7px}.brand-mark{display:none}.location-label{top:77px;left:20px}.scene-hint{display:none}header{padding:19px 20px}.header-actions button{padding:9px 11px}.header-actions button span{font-size:0}.header-actions button span:after{content:'Contents';font-size:11px}.book-controls{bottom:16px}.cook-controls{bottom:78px}.reader h1{font-size:30px}}
@media(max-width:560px){header{padding:14px}.brand b{font-size:14px}.brand small{letter-spacing:1.4px}.header-actions{gap:5px}.header-actions button{padding:8px;font-size:10px}#save-recipe{width:31px;font-size:22px}.location-label{top:66px;left:15px}.location-label span:first-child{font-size:9px}.location-label span:last-child{font-size:12px}.book-controls{padding:4px 6px;gap:0;width:calc(100% - 20px);justify-content:center}.book-controls button{width:31px;height:34px;font-size:18px}.book-controls .recipe-position{width:calc(100vw - 230px);min-width:105px}.cook-controls{width:max-content;max-width:calc(100% - 24px);gap:0}.cook-controls .mode{padding:3px 9px;font-size:11px}#step-label{min-width:90px;max-width:125px;font-size:11px}.library,.reader{inset:8px;width:auto}.drawer-head{padding:25px 22px 12px}.library-filters{padding-left:22px;padding-right:22px}.reader-content{padding:0 24px 30px}dialog{margin:20px;padding:25px}#reset-view{display:none}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}


/* --- method steps, doneness cues and the step status line ----------------- */
#step-cue{position:fixed;left:50%;transform:translateX(-50%);bottom:116px;max-width:min(560px,84vw);
  text-align:center;font:11.5px/1.4 var(--ui);color:var(--muted);pointer-events:none;
  letter-spacing:.01em;text-shadow:0 1px 0 #fff9}
#step-cue:empty{display:none}
.reader .method-summary{font:11px var(--ui);letter-spacing:.09em;text-transform:uppercase;color:var(--accent);margin:10px 0 2px}
.reader ol.steps{list-style:none;padding-left:0;counter-reset:step}
.reader ol.steps>li{counter-increment:step;position:relative;padding:14px 14px 10px 48px;margin:12px 0;border-radius:6px;background:#f4efe2}
.reader ol.steps>li::before{content:counter(step);position:absolute;left:14px;top:14px;width:22px;height:22px;border-radius:50%;
  background:var(--green);color:#fdfbf4;font:600 11px/22px var(--ui);text-align:center}
.reader .step-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.reader .step-head b{font:600 13px var(--ui)}
.reader .step-head em{font:italic 11.5px var(--ui);color:var(--accent)}
.reader .step-head .step-time{font:10.5px var(--ui);color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:1px 7px}
.reader ol.steps p{margin:0 0 4px;font-size:15.5px;line-height:1.55}
.reader ol.steps .go-step{padding:2px 0 0}
.reader ol.steps>li.step-active{background:#eae3cf}
@media (max-width:760px){#step-cue{bottom:148px;font-size:11px}}

/* Readable cook-along text stays outside the canvas at every zoom level. */
.instruction-card{position:fixed;left:28px;top:145px;width:min(365px,30vw);max-height:calc(100vh - 310px);overflow:auto;background:#fffaf0f2;border:1px solid #fff9;border-radius:14px;padding:22px;box-shadow:0 12px 45px #2c35252b;backdrop-filter:blur(16px);z-index:2}
.instruction-top{display:flex;justify-content:space-between;gap:8px;align-items:center;font:10px var(--ui);letter-spacing:1.3px;color:var(--accent)}
.instruction-top button{font:11px var(--ui);letter-spacing:0;text-decoration:underline;padding:5px 0}
.instruction-card h2{font-size:28px;line-height:1.1;font-weight:500;margin:15px 0 12px}
.instruction-card>p{font:20px/1.5 Book,Georgia,serif;margin:0 0 18px}
.instruction-cues{display:flex;gap:6px;flex-wrap:wrap}
.instruction-cues span{font:12px/1.5 var(--ui);border:1px solid #cdd4bc;border-radius:6px;padding:5px 8px;background:#e9ecdf}
.instruction-card details{font:12px/1.5 var(--ui);margin-top:15px;color:#4b5745}
.instruction-card summary{cursor:pointer;padding:4px 0}.instruction-card ul{padding-left:18px}.instruction-card li{margin:7px 0}
.instruction-progress{height:3px;background:#dedacb;margin-top:18px;border-radius:3px}.instruction-progress span{display:block;height:100%;background:#53794e;border-radius:3px;transition:width .25s}
.reader ol.steps p{font-size:18px;line-height:1.65}.reader .step-head b{font-size:14px}.reader .go-step{font-size:12px;padding:8px 0}.reader ul{font-size:17px;line-height:1.65}
.method-reference{margin-top:28px;font:14px/1.6 Book}.method-reference summary{cursor:pointer;color:var(--accent)}
.motion-detail{border-top:1px solid #ded6c3;margin-top:16px;padding-top:12px;font:11px/1.5 var(--ui);color:#4e644b}.motion-detail>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:10px}.motion-detail button{font:11px var(--ui);padding:5px 7px;border:1px solid #ccd4bf;border-radius:5px;white-space:nowrap}.motion-detail small{font-size:9px;color:#7c7d6d;display:block;margin-top:5px}.motion-track{height:2px;background:#d9ddce;margin-top:6px;overflow:hidden}.motion-track span{display:block;width:100%;height:100%;background:#6f8b5b;transform-origin:left}
.model-toggle{position:fixed;left:32px;top:143px;z-index:3;background:#fffaf0e8;border:1px solid #d7d9c9;border-radius:20px;padding:8px 13px;font:11px var(--ui);color:#476342;box-shadow:0 3px 14px #23301d12}.model-toggle:disabled{opacity:.8}@media(max-width:900px){.model-toggle{left:20px;top:124px}}@media(max-width:560px){.model-toggle{left:15px;top:110px;font-size:10px;padding:7px 11px}}
#step-cue{display:none}
@media(max-width:1100px) and (min-width:761px){.instruction-card{left:20px;width:300px;padding:18px;top:130px}.instruction-card>p{font-size:18px}}
@media(max-width:760px){.instruction-card{left:12px;top:auto;bottom:134px;width:calc(100% - 24px);max-height:30vh;padding:14px 18px;border-radius:12px}.instruction-card h2{font-size:21px;margin:6px 0}.instruction-card>p{font-size:17px;line-height:1.4;margin-bottom:10px}.instruction-top{font-size:9px}.instruction-cues span{font-size:11px;padding:3px 6px}.instruction-card details{margin-top:8px}.instruction-progress{margin-top:10px}.instruction-card .instruction-top button{font-size:10px}}
.edition-switch{display:inline-flex;align-items:center;white-space:nowrap;text-decoration:none;background:#294235;color:#fff;border:1px solid #294235;border-radius:25px;padding:9px 12px;font:600 12px var(--ui)}.edition-switch:hover{background:#395748}.edition-switch:focus-visible{outline:2px solid #76552e;outline-offset:3px}@media(max-width:560px){.edition-switch{padding:7px 8px;font-size:10px}}
