.recipe-experience{column-gap:var(--space-9);grid-template-columns:minmax(0,1fr) 340px;grid-template-areas:"hero video""jumps jumps""body body";align-items:start;display:grid}.demo-hero{padding-block:var(--space-5) var(--space-7);grid-area:hero;min-width:0}.demo-hero .back-link{margin-bottom:var(--space-5)}.demo-hero h1{font-size:var(--text-title);max-width:18ch;line-height:1.08}.demo-description{margin:var(--space-5) 0;max-width:55ch;font-size:var(--text-lg);color:var(--ink-soft);line-height:1.6}.demo-creator{align-items:center;gap:var(--space-3);margin-top:var(--space-5);text-decoration:none;display:inline-flex}.demo-creator img{object-fit:cover;border-radius:50%;width:44px;height:44px}.creator-text{overflow-wrap:anywhere;min-width:0;line-height:1.4;display:grid}.creator-prefix{font-size:var(--text-sm);color:var(--ink-soft)}.demo-creator strong{font-size:var(--text-md);font-weight:650}.creator-role{font-size:var(--text-sm);color:var(--ink-soft)}.demo-creator:hover strong{text-underline-offset:.2em;text-decoration:underline}.demo-creator>svg{margin-left:var(--space-2)}.recipe-timing{border-block:1px solid var(--rule);padding-block:var(--space-4)}.recipe-timing dl{gap:var(--space-4);grid-template-columns:repeat(4,minmax(0,1fr));margin:0;display:grid}.recipe-timing dt,.step-timings dt{font-size:var(--text-sm);color:var(--ink-soft);font-weight:450;line-height:1.45}.recipe-timing dd{margin:var(--space-1) 0 0;font-family:var(--font-sign);font-size:var(--text-lg);font-weight:700;line-height:1.4}.recipe-timing .timing-pending{font-family:var(--font-text);font-size:var(--text-sm);font-weight:500}.recipe-timing-note{margin:var(--space-3) 0 0;font-size:var(--text-sm);color:var(--ink-soft)}.recipe-timing dd,.step-timings dd{font-variant-numeric:tabular-nums}.demo-actions{margin-top:var(--space-5)}.demo-facts{gap:var(--space-4) var(--space-5);margin:var(--space-5) 0 0;flex-wrap:wrap;padding:0;list-style:none;display:flex}.demo-facts li{gap:0 var(--space-2);font-size:var(--text-sm);grid-template-columns:auto 1fr;line-height:1.5;display:grid}.demo-facts svg{width:18px;height:18px;color:var(--ink-soft);grid-row:span 2;margin-top:2px}.demo-facts strong{font-size:var(--text-sm);font-weight:600}.demo-facts span{color:var(--ink-soft);font-size:var(--text-sm)}.video-rail{min-width:0;padding-block:var(--space-7);grid-area:video;align-self:center}.video-dock{gap:var(--space-3);scroll-margin-top:var(--space-5);display:grid}.video-frame{border-radius:var(--radius-lg);background:var(--slate);position:relative;overflow:hidden}.video-frame video{aspect-ratio:9/16;object-fit:contain;background:#000;width:100%;height:auto;display:block}.video-play{border:1px solid var(--paper);background:var(--paper);width:72px;height:72px;color:var(--slate);border-radius:50%;place-items:center;padding:0 0 0 4px;display:grid;position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%)}.video-play:hover{background:var(--lime)}.video-play svg{fill:currentColor}.video-play:focus-visible{outline-color:var(--on-blue);outline-offset:6px;box-shadow:0 0 0 10px var(--blue)}.video-watermark{top:var(--space-4);left:var(--space-4);padding:var(--space-1) var(--space-3);color:var(--cream);background:var(--slate);font-size:var(--text-sm);pointer-events:none;border-radius:999px;font-weight:600;position:absolute}.return-step{width:100%}.video-source{width:100%;font-size:var(--text-sm);justify-content:space-between}.video-error{padding:var(--space-4);border-radius:var(--radius-sm);background:var(--peach);font-size:var(--text-sm);margin:0}.recipe-jumps{align-items:center;gap:var(--space-6);z-index:3;scrollbar-width:none;border-block:1px solid var(--rule);background:var(--paper);grid-area:jumps;min-width:0;display:flex;position:sticky;top:0;overflow-x:auto}.recipe-jumps a{align-items:center;gap:var(--space-2);min-height:64px;font-size:var(--text-sm);white-space:nowrap;font-weight:600;text-decoration:none;display:inline-flex}.recipe-jumps a:hover{text-decoration:underline}.jump-count{background:var(--sage);width:24px;height:24px;font-size:var(--text-sm);font-variant-numeric:tabular-nums;border-radius:50%;place-items:center;display:inline-grid}.recipe-jumps button{border-radius:var(--radius-sm);background:0 0;border:0;place-items:center;width:44px;height:44px;margin-left:auto;display:grid}.recipe-jumps button:hover{background:var(--sage)}.recipe-body{column-gap:var(--space-8);row-gap:var(--space-8);padding-top:var(--space-7);grid-area:body;grid-template-columns:340px minmax(0,1fr);align-items:start;display:grid}.ingredients-column{overscroll-behavior:contain;min-width:0;max-height:calc(100dvh - 112px);padding:var(--space-5);border-radius:var(--radius-md);background:var(--sage);position:sticky;top:88px;overflow-y:auto}.demo-ingredients,.demo-method,.demo-source,.method-step{scroll-margin-top:88px}.section-title{margin-bottom:var(--space-5)}.section-title p{margin:var(--space-3) 0 0;color:var(--ink-soft);font-size:var(--text-sm);max-width:52ch}.demo-ingredients .rubric{font-size:var(--text-xl)}.ingredient-groups{gap:var(--space-5);display:grid}.ingredient-group h3{font-family:var(--font-text);font-size:var(--text-sm);letter-spacing:0;padding-bottom:var(--space-2);font-weight:700}.ingredient-row{gap:var(--space-2);cursor:pointer;font-size:var(--text-md)}.ingredient-row .tick{width:20px;height:20px}.ingredient-row .board-amount{font-size:var(--text-sm)}.ingredient-name{background:linear-gradient(var(--blue), var(--blue)) no-repeat 0 55% / 0 2px;transition:background-size .32s var(--ease-out), color .2s}.ingredient-row:has(input:checked) .ingredient-name{color:var(--ink-faint);background-size:100% 2px}.ingredient-row:has(input:checked) .board-amount{color:var(--ink-faint)}.ingredient-progress{justify-content:space-between;align-items:center;column-gap:var(--space-3);margin-top:var(--space-4);color:var(--ink-soft);font-size:var(--text-sm);font-variant-numeric:tabular-nums;flex-wrap:wrap;display:flex}.before-cooking{gap:var(--space-3);margin-top:var(--space-5);padding-top:var(--space-5);border-top:1px solid var(--rule-strong);grid-template-columns:auto 1fr;display:grid}.before-cooking>svg{width:20px;height:20px;margin-top:var(--space-1)}.before-cooking strong{font-size:var(--text-sm);font-weight:700;line-height:1.45;display:block}.before-cooking p{margin:var(--space-2) 0 0;color:var(--ink-soft);font-size:var(--text-sm)}.demo-method{min-width:0}.preview-toggle{margin-top:var(--space-2)}.step-progress{align-items:center;gap:var(--space-4);margin-bottom:var(--space-6);font-size:var(--text-sm);color:var(--ink-soft);font-variant-numeric:tabular-nums;display:flex}.step-progress progress{appearance:none;background:var(--rule);border:0;border-radius:999px;width:120px;height:4px;overflow:hidden}.step-progress progress::-webkit-progress-bar{background:var(--rule)}.step-progress progress::-webkit-progress-value{background:var(--blue)}.step-progress progress::-moz-progress-bar{background:var(--blue)}.method-steps{margin:0;padding:0;list-style:none}.method-step{align-items:start;gap:0 var(--space-5);padding-block:var(--space-6);border-top:1px solid var(--rule);grid-template-rows:auto 1fr;grid-template-columns:minmax(0,1fr) 170px;display:grid}.step-copy{min-width:0}.step-heading{align-items:flex-start;gap:var(--space-3);margin-bottom:var(--space-4);display:flex}.step-number{background:var(--sage);width:32px;height:32px;font-family:var(--font-sign);font-size:var(--text-md);font-variant-numeric:tabular-nums;border-radius:50%;flex-shrink:0;place-items:center;font-weight:650;line-height:1;display:grid}.step-copy h3{font-size:var(--text-xl);line-height:1.25}.step-copy h3:focus{outline:none}.step-copy h3:focus-visible{outline:3px solid var(--focus);outline-offset:4px}.step-timings{gap:var(--space-2) var(--space-4);margin:0 0 var(--space-4);flex-wrap:wrap;display:flex}.step-timings>div{align-items:baseline;gap:var(--space-1) var(--space-2);flex-wrap:wrap;display:flex}.step-timings dd{font-size:var(--text-sm);margin:0;font-weight:650;line-height:1.45}.step-copy p{margin:0;line-height:1.65}.step-copy .step-detail{width:fit-content;max-width:100%;margin-top:var(--space-4);padding:var(--space-1) var(--space-3);border-radius:var(--radius-sm);background:var(--peach);font-size:var(--text-sm);line-height:1.5}.step-check{align-items:center;gap:var(--space-2);width:fit-content;min-height:44px;margin-top:var(--space-4);cursor:pointer;font-size:var(--text-sm);grid-column:1;font-weight:500;display:flex}.step-check:hover{text-decoration:underline}.method-step:has([data-step-complete]:checked) .step-number{background:var(--slate);color:var(--cream)}.method-step:has([data-step-complete]:checked) h3{color:var(--ink-soft);text-decoration:line-through}.method-step.is-active .step-number{background:var(--blue);color:var(--on-blue)}.method-step.is-active{border-top-color:var(--blue)}.step-image{aspect-ratio:9/16;border-radius:var(--radius-md);background:var(--flour);cursor:pointer;border:0;grid-area:1/2/span 2;width:100%;padding:0;display:block;position:relative;overflow:hidden}.step-image img,.step-image video{object-fit:contain;width:100%;height:100%;display:block;position:absolute;inset:0}.step-image:focus-visible{outline-offset:5px}.step-body,.step-image{interpolate-size:allow-keywords;transition:height .25s var(--ease-out), margin-top .25s var(--ease-out), visibility 0s}.step-body{overflow:hidden}.step-heading{transition:margin-bottom .25s var(--ease-out)}.method-step:has([data-step-complete]:checked) :is(.step-body,.step-image){visibility:hidden;height:0;margin-top:0;transition-delay:0s,0s,.25s}.method-step:has([data-step-complete]:checked) .step-heading{margin-bottom:0}.stills-note{margin:var(--space-3) 0 0;font-size:var(--text-sm);color:var(--ink-soft)}.demo-source{margin-top:var(--space-8);align-items:center;gap:var(--space-7);padding:var(--space-7);border-radius:var(--radius-lg);grid-column:1/-1;grid-template-columns:180px minmax(0,1fr);display:grid}.source-photo{object-fit:cover;border-radius:var(--radius-md);width:180px;height:220px;display:block}.demo-source h2{font-size:var(--text-2xl)}.source-copy{min-width:0}.source-role{margin:var(--space-3) 0;font-size:var(--text-sm);color:var(--ink-soft)}.source-role strong{color:var(--ink);font-weight:600}.source-copy>p:not(.source-role){margin:0 0 var(--space-5);color:var(--ink-soft);max-width:58ch}.source-links{gap:var(--space-3);flex-wrap:wrap;display:flex}.source-links>*{font-size:var(--text-sm)}.demo-noscript{padding:var(--space-4);border:1px solid var(--rule);border-radius:var(--radius-sm);grid-column:1/-1}@media (width<=1100px){.recipe-experience{column-gap:var(--space-7);grid-template-columns:minmax(0,1fr) 300px}.recipe-body{column-gap:var(--space-6);grid-template-columns:290px minmax(0,1fr)}.recipe-timing dl{grid-template-columns:repeat(2,minmax(0,1fr))}.ingredients-column{padding:var(--space-4)}.method-step{column-gap:var(--space-4);grid-template-columns:minmax(0,1fr) 140px}}@media (width<=900px){.recipe-experience{column-gap:var(--space-6);grid-template-columns:minmax(0,1fr) 260px}.recipe-body{row-gap:var(--space-7);grid-template-columns:minmax(0,1fr)}.ingredients-column{max-height:none;padding:var(--space-6);position:static;overflow:visible}.ingredient-groups{gap:var(--space-6);grid-template-columns:repeat(2,minmax(0,1fr))}.ingredient-row{font-size:var(--text-md)}.method-step{column-gap:var(--space-6);grid-template-columns:minmax(0,1fr) 180px}}@media (width<=720px){.recipe-experience{grid-template-columns:minmax(0,1fr);grid-template-areas:"hero""video""jumps""body"}.demo-hero{padding-top:var(--space-3);padding-bottom:var(--space-6)}.demo-hero .back-link{margin-bottom:var(--space-4)}.demo-hero h1{max-width:18ch}.demo-creator{margin-top:var(--space-5)}.demo-description{font-size:var(--text-md)}.demo-facts{gap:var(--space-4)}.video-rail{width:min(100%,320px);padding-block:0 var(--space-6);margin-inline:auto}.recipe-jumps{gap:var(--space-5);margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter)}.recipe-jumps a{min-height:60px;font-size:var(--text-sm)}.recipe-jumps button{flex-shrink:0}.recipe-body{padding-top:var(--space-6);row-gap:var(--space-7)}.ingredients-column{padding:var(--space-5)}.ingredient-groups{gap:var(--space-5);grid-template-columns:minmax(0,1fr)}.demo-ingredients .rubric{font-size:var(--text-2xl)}.ingredient-row,.ingredient-row .board-amount{font-size:var(--text-md)}.method-step{padding-block:var(--space-6);grid-template-columns:minmax(0,1fr)}.step-image,.step-check{grid-area:auto/1}.step-image{width:min(100%,240px);margin-top:var(--space-5);justify-self:center}.step-heading{align-items:center}.step-copy h3{font-size:var(--text-xl)}.demo-source{margin-top:var(--space-7);padding:var(--space-6);gap:var(--space-5);grid-template-columns:minmax(0,1fr)}.source-photo{border-radius:50%;width:88px;height:88px}.source-links{flex-direction:column}}@media (width<=360px){.recipe-jumps{gap:var(--space-3)}.jump-count{display:none}.ingredients-column{padding:var(--space-4)}}@media print{.video-rail,.recipe-jumps,.demo-actions,.step-check,.step-progress,.ingredient-progress,.source-links,.demo-creator>svg,.step-image video,.preview-toggle,.back-link{display:none!important}.recipe-experience,.recipe-body{padding:0;display:block}.demo-hero{padding:0 0 16pt}.demo-hero h1{max-width:25ch;font-size:28pt}.demo-description{font-size:11pt}.demo-creator,.recipe-timing{margin-top:12pt}.recipe-timing dl{grid-template-columns:repeat(4,minmax(0,1fr))}.ingredients-column{max-height:none;margin-bottom:24pt;padding:0;position:static;overflow:visible}.ingredient-groups{grid-template-columns:repeat(2,minmax(0,1fr));gap:16pt 24pt}.before-cooking{margin-top:16pt;padding-top:12pt}.section-title{margin-bottom:12pt}.method-step{break-inside:avoid;grid-template-columns:minmax(0,1fr) 88px;gap:0 20pt;padding-block:12pt}.step-image{grid-area:1/2/span 2;width:88px;height:156px;margin-top:0}.method-step:has([data-step-complete]:checked) :is(.step-body,.step-image){visibility:visible;height:auto;transition:none}.method-step:has([data-step-complete]:checked) .step-heading{margin-bottom:var(--space-4)}.step-copy p{font-size:11pt}.step-copy .step-detail{padding:0}.step-copy h3{font-size:16pt}.step-number{font-size:12pt}.demo-source{border-top:1px solid var(--rule);break-inside:avoid;grid-template-columns:64px 1fr;gap:20pt;margin-top:12pt;padding:20pt 0}.source-photo{width:64px;height:64px}.demo-source h2,.rubric{font-size:20pt}.demo-source p{font-size:10pt}}.demo-actions{align-items:center;gap:var(--space-3);flex-wrap:wrap;display:flex}.preview-notice{background:var(--peach);text-align:center;padding:16px 24px;font-size:14px}.recipe-extra-notes{padding-block:32px}
