.snip-modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:var(--space-6)}.snip-modal__backdrop{position:absolute;inset:0;background:color-mix(in srgb,var(--surface-page) 82%,transparent);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.snip-modal__panel{position:relative;display:flex;flex-direction:column;gap:var(--space-6);width:min(60rem,100%);height:min(38rem,100%);padding:var(--space-8);border-radius:1.5rem;background:var(--surface-overlay);color:var(--ink-secondary)}.snip-modal__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-6)}.snip-modal__title{color:var(--ink-primary)}.snip-modal__tags{margin-top:var(--space-3);--card-chip-ink:var(--ink-on-colour);--card-chip-fill:var(--dim-fill)}.snip-modal__body{flex:1 1;min-height:0;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);grid-gap:var(--space-6);gap:var(--space-6)}.snip-modal__stage{min-height:18rem;border-radius:1rem;background:var(--surface-raised);overflow:hidden}.snip-modal__details{display:flex;flex-direction:column;gap:var(--space-6);min-height:0;overflow:hidden}.snip-modal__details>section{display:flex;flex-direction:column;flex:1 1;min-height:0}.snip-modal__copy{color:var(--ink-secondary)}.snip-modal__tag--lib{display:inline-flex;align-items:baseline;gap:var(--space-2)}.snip-modal__version{font-family:var(--font-mono);opacity:.6}.snip-modal__code-block{position:relative;margin-top:var(--space-4);display:flex;flex:1 1;min-height:0}.snip-modal__code-copy{position:absolute;inset-block-start:var(--space-2);inset-inline-end:var(--space-2)}.snip-modal__code{padding:var(--space-4);-webkit-padding-end:3rem;padding-inline-end:3rem;border-radius:var(--radius-lg);background:var(--surface-raised);font-family:var(--font-mono);font-size:.75rem;line-height:1.7;color:var(--ink-secondary);white-space:pre-wrap;overflow-wrap:anywhere;flex:1 1;min-height:0;margin:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}@media (max-width:56rem){.snip-modal__body{grid-template-columns:1fr;overflow-y:auto}.snip-modal__stage{min-height:16rem}.snip-modal__details{overflow:visible}.snip-modal__code,.snip-modal__code-block,.snip-modal__details>section{flex:initial;min-height:auto;overflow:visible}}@media (max-width:48rem){.snip-modal__panel{padding:var(--space-6)}}.snip-card{display:flex;flex-direction:column;width:100%;height:100%;min-height:var(--card-height);padding:var(--space-6);border-radius:1.5rem;background:var(--snip-bg,var(--surface-raised));color:var(--ink-secondary);text-align:left;text-decoration:none;font:inherit;cursor:pointer;transition:transform var(--duration-card) var(--ease-card);will-change:transform}.snip-card:hover{transform:scale(.97)}.snip-card__meta{display:flex;justify-content:flex-end;min-height:3rem}.snip-card__date{display:flex;flex-direction:column;align-items:flex-end;line-height:1}.snip-card__day{font-weight:800;color:var(--ink-primary)}.snip-card__my{margin-top:var(--space-1)}.snip-card__name{margin-top:var(--space-3);color:var(--ink-primary)}.snip-card__tags{margin-top:var(--space-4);--card-chip-ink:var(--ink-on-colour);--card-chip-fill:var(--dim-fill)}.snip-card__display{margin-top:var(--space-4);flex:1 1;min-height:0;border-radius:1rem;background:var(--snip-panel,var(--surface-page));overflow:hidden;contain:size}.lazy-mount,.snip-card__preview{width:100%;height:100%}.snip-card__preview{object-fit:cover;display:block}.snip-card--showcase{position:relative;padding:0;overflow:hidden}.snip-card--showcase .snip-card__display{position:absolute;inset:0;margin-top:0;border-radius:inherit}.snip-card--showcase:before{content:"";position:absolute;inset:0 0 auto;height:45%;z-index:1;background:linear-gradient(180deg,var(--snip-panel,var(--surface-page)) 0,transparent 100%);pointer-events:none}.snip-card--showcase .snip-card__name{position:relative;z-index:2;margin:0;color:var(--colour-void-40);padding:var(--space-8)}.snip-section{padding-block:var(--space-16)}.snip-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;grid-gap:var(--space-6);gap:var(--space-6)}@media (max-width:64rem){.snip-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:36rem){.snip-grid{grid-template-columns:1fr}}.snip-grid.is-armed>.snip-card{opacity:0}