@layer loamui.components{@scope(.site-RecipeStage) to ([class*=loam-],.frame>*){:scope{border:1px solid var(--loam-color-line);border-radius:var(--loam-radius-lg);min-inline-size:0;overflow:clip}.toolbar{background:var(--loam-color-surface);border-block-end:1px solid var(--loam-color-line);align-items:center;gap:var(--loam-space-xs);padding:var(--loam-space-2xs) var(--loam-space-2xs);flex-wrap:wrap;justify-content:space-between;display:flex}.toolbar a{border-radius:var(--loam-radius-md);color:var(--loam-color-fg-muted);padding:var(--loam-space-2xs);border:1px solid #0000;place-items:center;display:inline-grid}.toolbar a:hover{color:var(--loam-color-fg)}@media (prefers-reduced-motion:no-preference){.toolbar a{transition:color var(--loam-duration-md) var(--loam-ease)}}fieldset,.options{align-items:center;gap:var(--loam-space-3xs);display:flex}fieldset{border:0;min-inline-size:0;margin:0;padding:0}label,button{background:var(--loam-color-bg);border:1px solid var(--loam-color-line);border-radius:var(--loam-radius-sm);box-shadow:none;color:var(--loam-color-fg-muted);cursor:pointer;font-size:var(--loam-text-sm);min-block-size:2.75rem;min-inline-size:2.75rem;padding:var(--loam-space-3xs);justify-content:center;align-items:center;display:inline-flex}:is(label,button)[aria-pressed=true]{border-color:var(--loam-color-fg);color:var(--loam-color-fg)}:is(label,button):has(input:checked){border-color:var(--loam-color-fg);color:var(--loam-color-fg)}:is(label,button):has(input:focus-visible){outline:var(--loam-ring-width) solid var(--loam-color-ring);outline-offset:2px}@media (forced-colors:active){:is(label,button)[aria-pressed=true]{outline:2px solid highlight}:is(label,button):has(input:checked){outline:2px solid highlight}}.stage{background-color:var(--loam-color-bg-subtle);background-image:radial-gradient(circle at 1px 1px, var(--loam-color-line-strong) 1px, transparent 0);padding:var(--loam-space-xs);background-size:1.25rem 1.25rem;grid-template-columns:minmax(0,1fr);justify-items:center;display:grid}.stage[data-width=narrow]{--_w:24rem}.stage[data-width=medium]{--_w:40rem}.stage[data-width=wide]{--_w:64rem}.frame{background:var(--loam-color-bg);border-radius:var(--loam-radius-md);box-shadow:var(--loam-shadow-sm);color:var(--loam-color-fg);inline-size:100%;max-inline-size:var(--_w,100%);outline:1px solid var(--loam-color-line-strong);padding:clamp(1rem,.5rem + 2cqi,2.5rem);container-type:inline-size}@media (prefers-reduced-motion:no-preference){.frame{transition:max-inline-size var(--loam-duration-lg) var(--loam-ease)}}}}
@scope(.site-RecipePager){:scope{border-block-start:1px solid var(--loam-color-line);gap:var(--loam-space-s);grid-template-columns:repeat(2,minmax(0,1fr));padding-block-start:var(--loam-space-l);display:grid}@container examples not (min-inline-size:40rem){:scope{grid-template-columns:minmax(0,1fr)}}a{border:1px solid var(--loam-color-line);border-radius:var(--loam-radius-lg);gap:var(--loam-space-3xs);padding:var(--loam-space-xs) var(--loam-space-s);display:grid}a>span+span{color:var(--loam-color-fg-strong);font-weight:600}a>span:first-child{color:var(--loam-color-fg-dim);font-size:var(--loam-text-xs);letter-spacing:.04em;text-transform:uppercase;font-weight:600}a[data-next]{text-align:end}a:hover{background:var(--loam-color-surface-hover);border-color:var(--loam-color-line-strong)}@media (prefers-reduced-motion:no-preference){a{transition:background var(--loam-duration-md) var(--loam-ease), border-color var(--loam-duration-md) var(--loam-ease)}}}