/* The Nutrition chapter dialled down, on dialdown.html only (Claude, private, Nov 3). Phone first, then tablet, then computer.
   One story in three parts: the reveal (9 in 10, the box rising into Up to 40× more nutrition.) and the six greens on black, then One handful a day. and the meals on mist, then one Get my greens button.
   One headline size across all three. The old chapter stays in the page, hidden, so the page's other scripts still find what they look for.
   The selectors carry four ids so the page's fifty-odd earlier stylesheets can't reach in. */

html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on{
 --u:1px;
 --w:calc(100% - 40px);
 --h:30px;
 --line:17px;
 --fg:#fff;
 --grey:rgb(255 255 255 / .76);
 --lime:#AEEE42;
 --ink:var(--oh-ink,#144444);
 --muted:var(--oh-muted,#56635F);
 --mist:var(--oh-mist,#F1F5F2);
 display:block;grid-template-columns:none;grid-template-rows:none;width:auto;max-width:none;margin:0;padding:0 0 56px;background:var(--mist);
}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on>.nm-cq,
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on>.concept-review-note,
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on #taste{display:none!important}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .gp-page{display:block;background:transparent}

html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd,
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd *{box-sizing:border-box}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd{display:block;margin:0;padding:0;font-family:inherit;text-align:center}

/* One headline size for all three parts. */
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-h{display:block;width:auto;max-width:none;margin:0 auto;padding:0;background:none;font-family:inherit;font-size:var(--h);line-height:1.12;font-weight:600;letter-spacing:-.012em;text-transform:none;text-align:center;text-wrap:balance;color:inherit}

/* 1. The reveal, on black. */
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-black{position:relative;overflow:hidden;margin:0;padding:56px 20px 64px;background:#000;color:var(--fg)}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-black .dd-h{color:var(--fg)}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-ref{display:inline-block;margin:0 0 0 .12em;padding:0;font-size:.42em;line-height:1;font-weight:500;vertical-align:.95em;color:var(--grey);text-decoration:none}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-ref:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* The box under one light: the same lit-for-black photo as index.html (tools/build-box-stage.py), its shadow from its own silhouette. */
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-box{position:relative;isolation:isolate;width:min(290px,74vw);margin:28px auto 0;padding:0}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-box img{position:relative;z-index:1;display:block;width:100%;height:auto;max-width:none;margin:0;border-radius:0;background:none;box-shadow:none;filter:none}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-box::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:url(assets/box-stage.webp) center/100% 100% no-repeat;filter:brightness(0) blur(14px);opacity:.9;transform:translateY(14px) scale(.985)}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-box::after{content:"";position:absolute;inset:-34% -62%;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgb(104 136 126 / .34) 0%,rgb(104 136 126 / .31) 30%,rgb(104 136 126 / .24) 48%,rgb(104 136 126 / .155) 64%,rgb(104 136 126 / .08) 78%,rgb(104 136 126 / .024) 92%,rgb(104 136 126 / 0) 100%)}
/* Up to 40× more nutrition. on one line; the 40× is the chapter's one big figure. */
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-claim{position:relative;z-index:2;display:flex;flex-wrap:nowrap;align-items:baseline;justify-content:center;width:auto;max-width:none;margin:22px 0 0;padding:0;background:none;font-family:inherit;color:var(--fg);text-align:center;white-space:nowrap}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-up,
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-more{display:inline;margin:0;font-size:min(19px,4.9vw);line-height:1;font-weight:600;letter-spacing:-.005em}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-up{color:var(--grey)}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-more{color:var(--fg)}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-num{display:inline;margin:0 .13em 0 .11em;font-size:min(72px,18.5vw);line-height:.9;font-weight:600;letter-spacing:-.03em;color:var(--fg);-webkit-text-fill-color:currentColor;background:none}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-x{font-size:.56em;margin:0 0 0 .03em;color:var(--lime);-webkit-text-fill-color:var(--lime)}
/* Shaan's comparison line (Nov 2), brighter than grey on his note: #E0E0E0, as 88% white. */
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-note{position:relative;z-index:2;margin:10px 0 0;padding:0;font-size:var(--line);line-height:1.35;font-weight:400;letter-spacing:.005em;color:rgb(255 255 255 / .88);text-align:center;text-wrap:balance}

/* 2. The six greens, still on black: name, then one benefit line. Nutrients and flavor open behind one tap. */
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-greens{margin:72px 0 0;padding:0}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-six{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 8px;width:100%;max-width:none;margin:26px 0 0;padding:0;list-style:none}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-six li{display:flex;flex-direction:column;align-items:center;min-width:0;margin:0;padding:0;list-style:none;font-size:15px;line-height:1.25;font-weight:400;color:var(--fg);text-align:center}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-six li::before{content:none}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-six img{display:block;width:100%;max-width:150px;height:auto;aspect-ratio:3/2;margin:0 auto 8px;object-fit:contain;border-radius:0;background:none;box-shadow:none;filter:none}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-six b{display:block;font-weight:600;letter-spacing:-.01em;color:var(--fg)}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-benefit{display:block;margin:3px 0 0;font-size:clamp(12px,3.34vw,13px);line-height:1.3;font-weight:400;letter-spacing:0;color:var(--fg)}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-detail{display:none;flex-direction:column;gap:2px;margin:6px 0 0;font-size:13px;line-height:1.3;font-weight:400;color:var(--grey);text-wrap:balance}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-six.dd-shown .dd-detail{display:flex}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-open{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin:24px auto 0;padding:0 2px 0 0;border:0;border-radius:0;background:none;box-shadow:none;font-family:inherit;font-size:15px;line-height:1.2;font-weight:500;letter-spacing:0;text-transform:none;color:var(--fg);cursor:pointer}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-open:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:6px}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-open i{position:relative;display:block;flex:none;width:28px;height:28px;margin:0;border-radius:50%;box-shadow:inset 0 0 0 1px rgb(255 255 255 / .32);color:var(--fg);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-open i::before,
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-open i::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.5px;border-radius:1px;background:currentColor;transform:translate(-50%,-50%)}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-open i::after{transform:translate(-50%,-50%) rotate(90deg)}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-open[aria-expanded="true"] i{transform:rotate(45deg)}

/* 3. The recipes, on mist: One handful a day., the four meals, then the one button. */
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-light{margin:0;padding:56px 20px 8px;background:var(--mist);color:var(--ink)}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-light .dd-h{color:var(--ink)}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-line{margin:10px 0 0;padding:0;font-size:var(--line);line-height:1.4;font-weight:400;letter-spacing:0;color:var(--muted);text-align:center}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-meals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px;width:100%;max-width:none;margin:28px 0 0;padding:0;list-style:none}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-meals li{min-width:0;margin:0;padding:0;list-style:none}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-meals li::before{content:none}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-meal{display:block;margin:0;padding:0;border-radius:20px;background:none;color:var(--ink);text-decoration:none}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-meal:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-meal img{display:block;width:100%;height:auto;max-width:none;aspect-ratio:4/3;margin:0;object-fit:cover;border-radius:20px;background:#E4ECE7;box-shadow:none;filter:none}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-meal span{display:inline-flex;align-items:center;gap:7px;margin:10px 0 0;font-size:min(17px,4.6vw);line-height:1.25;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-meal i{display:block;flex:none;width:7px;height:7px;margin:1px 0 0 -1px;border:solid currentColor;border-width:1.6px 1.6px 0 0;transform:rotate(45deg)}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-all-row{margin:24px 0 0;padding:0;text-align:center}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-all{font-size:16px;line-height:1.4;font-weight:500;color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-all:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-cta{display:flex;flex-direction:column;align-items:center;gap:12px;margin:32px 0 0;padding:0}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-button{display:flex;align-items:center;justify-content:center;width:100%;height:54px;margin:0;padding:0 30px;border:0;border-radius:100px;background:var(--oh-lime,#A4CD3A);box-shadow:none;font-family:inherit;font-size:13px;line-height:1;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--oh-deep,#0A2A2A)}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-button:hover{filter:brightness(1.05)}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-cta p{margin:0;padding:0;font-size:14px;line-height:1.4;font-weight:400;color:var(--muted);text-align:center}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-cta p strong{font-weight:600;color:var(--ink)}
/* The words moved behind the notes' taps keep the note's own style. */
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-moved strong{font-weight:600}

/* Tablet. */
@media (min-width:700px){
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on{--w:calc(100% - 96px);--h:34px;--line:18px}
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-black{padding:72px 48px 80px}
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-box{width:380px;margin-top:40px}
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-box::before{filter:brightness(0) blur(16px);transform:translateY(16px) scale(.985)}
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-up,
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-more{font-size:24px}
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-num{font-size:84px}
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-greens{margin-top:96px}
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-six{gap:32px 16px;margin-top:36px}
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-meal span{font-size:clamp(15px,2.35vw,17px)}
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-six img{max-width:none}
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-open{margin-top:32px}
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-light{padding:72px 48px 16px}
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-meals{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:36px}
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-button{width:auto;min-width:214px}
}

@media (min-width:940px){
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-six{grid-template-columns:repeat(6,minmax(0,1fr));row-gap:0}
}

/* Computer: everything scales from one unit, 1u = 1px at 1440, as on index.html. */
@media (min-width:1000px){
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on{--u:clamp(.78px,calc(.28px + .05vw),1.0625px);--w:min(87.5vw,1260px);--h:max(32px,calc(var(--u)*40));--line:max(16px,calc(var(--u)*19));padding-bottom:0}
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-black{padding:calc(var(--u)*96) 0 calc(var(--u)*96)}
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-box{width:calc(var(--u)*480);margin-top:calc(var(--u)*56)}
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-box::before{filter:brightness(0) blur(calc(var(--u)*16));transform:translateY(calc(var(--u)*16)) scale(.985)}
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-claim{margin-top:calc(var(--u)*30)}
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-up,
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-more{font-size:max(24px,calc(var(--u)*30))}
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-num{margin:0 calc(var(--u)*10) 0 calc(var(--u)*12);font-size:calc(var(--u)*100)}
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-note{margin-top:calc(var(--u)*12)}
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-greens{width:var(--w);margin:calc(var(--u)*112) auto 0}
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-six{gap:0 calc(var(--u)*24);margin-top:calc(var(--u)*48)}
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-six img{margin-bottom:calc(var(--u)*14)}
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-six li{font-size:max(15px,calc(var(--u)*17))}
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-benefit{margin-top:4px;font-size:max(14px,calc(var(--u)*15))}
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-detail{margin-top:8px;font-size:14px}
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-open{margin-top:calc(var(--u)*44);font-size:17px;letter-spacing:-.016em}
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-light{padding:calc(var(--u)*96) 0 calc(var(--u)*16)}
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-meals{gap:calc(var(--u)*24);width:min(var(--w),calc(var(--u)*1120));margin:calc(var(--u)*48) auto 0}
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-meal span{margin-top:14px;font-size:max(17px,calc(var(--u)*20))}
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-all-row{margin-top:calc(var(--u)*32)}
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-all{font-size:17px;letter-spacing:-.016em}
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-cta{margin-top:calc(var(--u)*40);gap:14px}
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-button{font-size:17px;font-weight:600;letter-spacing:-.022em;text-transform:none;border-radius:980px}
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd-cta p{font-size:17px;letter-spacing:-.022em}
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .gp-notes{width:var(--w);margin:calc(var(--u)*56) auto 0;padding-bottom:calc(var(--u)*64)}
}

/* The one motion moment: the box rises into its light, then the claim and its line come in under it once they are on screen. dialdown.js only sets dd-wait when the box starts below the fold. */
@media (prefers-reduced-motion:no-preference){
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd.dd-wait .dd-box img{opacity:0;transform:translateY(calc(var(--u)*56)) scale(.965);filter:brightness(.45)}
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd.dd-wait .dd-box::after{opacity:0}
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd.dd-wait .dd-box::before{opacity:0}
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd.dd-wait .dd-claim,
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd.dd-wait .dd-note{opacity:0;transform:translateY(calc(var(--u)*18))}
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd.dd-rise .dd-box img{opacity:1;transform:none;filter:none;transition:opacity .7s linear,transform 1.5s cubic-bezier(.2,.8,.2,1),filter 1.5s cubic-bezier(.3,0,.2,1)}
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd.dd-rise .dd-box::after{opacity:1;transition:opacity 1.1s ease}
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd.dd-rise .dd-box::before{opacity:.9;transition:opacity .9s ease .7s}
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd.dd-claimed .dd-claim{opacity:1;transform:none;transition:opacity .7s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd.dd-claimed .dd-note{opacity:1;transform:none;transition:opacity .7s ease .25s,transform .9s cubic-bezier(.2,.8,.2,1) .25s}
}

/* The recipe window, from steps.html's, at every width. On a phone it fills the screen, photo on top. */
html.dd-recipe-open{overflow:hidden}
html body dialog.dd-recipe{box-sizing:border-box;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:#fff;color:var(--oh-ink,#144444);box-shadow:none;overflow:hidden;font-family:inherit;text-align:left}
html body dialog.dd-recipe::backdrop{background:rgb(10 42 42 / .5)}
html body dialog.dd-recipe *{box-sizing:border-box}
html body dialog.dd-recipe .dd-recipe-inner{position:relative;display:flex;flex-direction:column;height:100%}
html body dialog.dd-recipe .dd-recipe-photo{flex:0 0 34%;min-height:0;background:var(--oh-mist,#F1F5F2)}
html body dialog.dd-recipe .dd-recipe-photo img{display:block;width:100%;height:100%;object-fit:cover}
html body dialog.dd-recipe.dd-no-photo .dd-recipe-photo{display:none}
html body dialog.dd-recipe .dd-recipe-body{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding:20px 20px 40px}
html body dialog.dd-recipe.dd-no-photo .dd-recipe-body{padding-top:76px}
html body dialog.dd-recipe .dd-recipe-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0}
html body dialog.dd-recipe .dd-recipe-where{margin:0;font-size:14px;line-height:1.3;font-weight:600;letter-spacing:.01em;color:var(--oh-muted,#56635F)}
html body dialog.dd-recipe .dd-recipe-nav{display:flex;gap:8px}
html body dialog.dd-recipe button{display:grid;place-items:center;margin:0;padding:0;border:0;border-radius:50%;background:var(--oh-mist,#F1F5F2);color:var(--oh-ink,#144444);font:inherit;cursor:pointer}
html body dialog.dd-recipe .dd-recipe-nav button{width:40px;height:40px}
html body dialog.dd-recipe button:hover:not(:disabled){background:#E4ECE7}
html body dialog.dd-recipe button:disabled{opacity:.35;cursor:default}
html body dialog.dd-recipe button:focus-visible{outline:2px solid var(--oh-ink,#144444);outline-offset:2px}
html body dialog.dd-recipe button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
html body dialog.dd-recipe .dd-recipe-close{position:absolute;top:16px;right:16px;width:40px;height:40px;background:rgb(255 255 255 / .92);box-shadow:0 2px 10px rgb(10 42 42 / .14)}
html body dialog.dd-recipe h2{margin:14px 0 0;font-size:26px;line-height:1.15;font-weight:600;letter-spacing:-.012em;color:var(--oh-ink,#144444);text-wrap:balance}
html body dialog.dd-recipe .dd-recipe-sub{margin:8px 0 0;font-size:16px;line-height:1.45;color:var(--oh-muted,#56635F)}
html body dialog.dd-recipe .dd-recipe-chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0;list-style:none}
html body dialog.dd-recipe .dd-recipe-chips li{margin:0;padding:6px 14px;border-radius:999px;background:var(--oh-mist,#F1F5F2);font-size:14px;line-height:1.3;font-weight:500}
html body dialog.dd-recipe h3{margin:24px 0 0;font-size:20px;line-height:1.2;font-weight:600;letter-spacing:-.01em;color:var(--oh-ink,#144444)}
html body dialog.dd-recipe .dd-recipe-ingredients,
html body dialog.dd-recipe .dd-recipe-steps{margin:10px 0 0;padding:0;list-style:none;counter-reset:dd-step}
html body dialog.dd-recipe .dd-recipe-ingredients li{position:relative;margin:6px 0 0;padding:0 0 0 22px;font-size:16px;line-height:1.4}
html body dialog.dd-recipe .dd-recipe-ingredients li::before{content:"";position:absolute;left:3px;top:.6em;width:7px;height:7px;border-radius:50%;background:var(--oh-lime,#A4CD3A)}
html body dialog.dd-recipe .dd-recipe-steps li{position:relative;min-height:28px;margin:10px 0 0;padding:1px 0 0 42px;font-size:16px;line-height:1.4;counter-increment:dd-step}
html body dialog.dd-recipe .dd-recipe-steps li::before{content:counter(dd-step);position:absolute;left:0;top:0;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--oh-ink,#144444);color:#fff;font-size:14px;line-height:1;font-weight:600}
html body dialog.dd-recipe .dd-recipe-tip{margin:24px 0 0;padding:16px 20px;border-radius:16px;background:#F4F8EC;font-size:14px;line-height:1.5;color:var(--oh-muted,#56635F)}
html body dialog.dd-recipe .dd-recipe-tip strong{display:block;margin:0 0 4px;font-weight:600;color:var(--oh-ink,#144444)}
html body dialog.dd-recipe .dd-recipe-tip[hidden]{display:none}
@media (min-width:700px){
 html body dialog.dd-recipe{width:min(1040px,calc(100vw - 96px));height:min(780px,calc(100vh - 80px));margin:auto;border-radius:28px;box-shadow:0 30px 90px rgb(10 42 42 / .28)}
 html body dialog.dd-recipe::backdrop{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
 html body dialog.dd-recipe .dd-recipe-inner{display:grid;grid-template-columns:44% minmax(0,1fr)}
 html body dialog.dd-recipe.dd-no-photo .dd-recipe-inner{grid-template-columns:minmax(0,1fr)}
 html body dialog.dd-recipe .dd-recipe-body,
 html body dialog.dd-recipe.dd-no-photo .dd-recipe-body{padding:32px 52px 40px}
 html body dialog.dd-recipe .dd-recipe-top{margin-right:56px}
 html body dialog.dd-recipe .dd-recipe-nav button{width:36px;height:36px}
 html body dialog.dd-recipe .dd-recipe-close{top:28px;right:28px;background:var(--oh-mist,#F1F5F2);box-shadow:none}
 html body dialog.dd-recipe h2{margin-top:18px;font-size:32px;line-height:1.12}
 html body dialog.dd-recipe .dd-recipe-sub{margin-top:10px;font-size:18px}
 html body dialog.dd-recipe .dd-recipe-chips{margin-top:16px}
 html body dialog.dd-recipe h3{margin-top:28px}
 html body dialog.dd-recipe .dd-recipe-ingredients,
 html body dialog.dd-recipe .dd-recipe-steps{margin-top:12px}
 html body dialog.dd-recipe .dd-recipe-ingredients li,
 html body dialog.dd-recipe .dd-recipe-steps li{font-size:18px}
 html body dialog.dd-recipe .dd-recipe-steps li{padding-left:44px}
 html body dialog.dd-recipe .dd-recipe-tip{margin-top:28px}
}
@media (prefers-reduced-motion:no-preference){
 html body dialog.dd-recipe[open]{animation:dd-recipe-in 280ms cubic-bezier(.2,.8,.2,1)}
 html body dialog.dd-recipe[open]::backdrop{animation:dd-recipe-fade 280ms ease}
 @keyframes dd-recipe-in{from{opacity:0;transform:translateY(12px) scale(.985)}}
 @keyframes dd-recipe-fade{from{opacity:0}}
}