@layer components{.template-showcase{min-width:0;scroll-margin-top:var(--home-showcase-sticky-offset,0px);padding-block:16px 32px;container-type:inline-size}.template-showcase-nav{top:var(--home-showcase-sticky-offset,0px);z-index:20;background:color-mix(in srgb, var(--background) 94%, transparent);border-block:1px solid var(--border-subtle);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);scrollbar-width:none;justify-content:center;gap:8px;padding:10px 0;display:flex;position:sticky;overflow-x:auto}.template-showcase-nav a{border:1px solid var(--border);color:var(--muted-foreground);background:var(--card);border-radius:9999px;flex:none;padding:7px 16px;font-size:14px;line-height:20px;transition:color .15s,background-color .15s,border-color .15s}.template-showcase-nav a:hover{color:var(--foreground);background:var(--accent)}.template-showcase-nav a[aria-current]{color:var(--primary);border-color:color-mix(in srgb, var(--primary) 55%, var(--border));background:color-mix(in srgb, var(--primary) 12%, var(--card))}.template-showcase-group{scroll-margin-top:calc(var(--home-showcase-sticky-offset,0px) + 82px);padding-top:24px}.template-showcase-group+.template-showcase-group{margin-top:24px}.template-showcase-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:10px;display:grid;position:relative}.template-showcase-card{min-width:0}.template-showcase-media{isolation:isolate;background:var(--card);border-radius:12px;width:100%;min-width:0;position:relative;overflow:hidden}.template-showcase-open,.template-showcase-open img,.template-showcase-media video{width:100%;height:100%;position:absolute;inset:0}.template-showcase-open img,.template-showcase-media video{object-fit:cover}.template-showcase-media video{pointer-events:none}.template-showcase-input{object-fit:cover;pointer-events:none;border:2px solid #ffffffd9;border-radius:10px;width:56px;height:56px;position:absolute;bottom:56px;right:8px;box-shadow:0 2px 10px #00000073}.template-showcase-playback{pointer-events:none;position:absolute;inset:0}.template-showcase-playback button{color:#fff;pointer-events:auto;background:#0006;border-radius:50%;place-items:center;width:44px;height:44px;display:grid;position:absolute;bottom:4px;right:4px}.template-showcase-playback [data-video-control=sound]{top:4px;bottom:auto}.template-showcase-playback svg{width:18px;height:18px}.template-showcase-error{color:#fff;pointer-events:none;background:#000c;border-radius:8px;padding:8px;font-size:12px;line-height:16px;position:absolute;inset:auto 8px 54px}.template-showcase-grid-wrap{position:relative}.template-showcase-expand{justify-content:center;margin-top:12px;display:flex;position:relative}.template-showcase :is(button,a):focus-visible{outline:2px solid var(--primary);outline-offset:2px}.template-showcase-open:focus-visible{outline-offset:-3px}@media (width<=768px){.template-showcase{scroll-margin-top:var(--home-showcase-sticky-offset,56px)}.template-showcase-nav{top:var(--home-showcase-sticky-offset,56px);justify-content:flex-start;padding-block:8px}.template-showcase-group{scroll-margin-top:calc(var(--home-showcase-sticky-offset,56px) + 82px)}}@media (prefers-reduced-motion:reduce){.template-showcase :is(a,button){transition:none}}@media (width<=767px){.template-showcase-group[data-first-group=true]{padding-top:8px}}.creation-dialog{overflow:hidden}.reference-recipe{grid-template-columns:minmax(0,1fr) 400px;width:100%;height:100%;min-height:0;display:grid}.reference-recipe-media{background:#000;justify-content:center;align-items:center;min-width:0;min-height:0;padding:24px;display:flex}.reference-recipe-media video{object-fit:contain;border-radius:12px;width:100%;height:100%;max-height:calc(100dvh - 48px)}.reference-recipe-details{border-left:1px solid var(--border);background:var(--card);flex-direction:column;min-height:0;display:flex}.reference-recipe-scroll{flex:1;padding:24px;overflow-y:auto}.reference-recipe-action{padding:20px 24px max(20px, env(safe-area-inset-bottom));border-top:1px solid var(--border-subtle);flex-shrink:0}.template-dialog-body{background:var(--card);height:100%;min-height:0;padding:64px 24px 24px;overflow-y:auto}.template-dialog-page-link{z-index:2;background:var(--card);border:1px solid var(--border);border-radius:999px;place-items:center;width:36px;height:36px;display:grid;position:absolute;top:16px;right:60px}@media (width<=767px){.reference-recipe{flex-direction:column;display:flex;overflow-y:auto}.reference-recipe-media{flex-shrink:0;height:38dvh;min-height:240px;padding:12px}.reference-recipe-media video{max-height:100%}.reference-recipe-details{display:contents}.reference-recipe-scroll{background:var(--card);flex:none;padding:20px 16px;overflow:visible}.reference-recipe-action{padding:12px 16px max(12px, env(safe-area-inset-bottom));background:var(--card);margin-top:auto;position:sticky;bottom:0}.template-dialog-body{padding:64px 16px 16px}}}