.snip-modal{z-index:100;padding:var(--space-6);place-items:center;height:100dvh;max-height:100%;display:grid;position:fixed;inset:0}.snip-modal__backdrop{background:color-mix(in srgb, var(--surface-page) 82%, transparent);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);position:absolute;inset:0}.snip-modal__panel{gap:var(--space-6);width:min(60rem,100%);height:min(38rem,100%);padding:var(--space-8);background:var(--surface-overlay);max-height:100%;color:var(--ink-secondary);border-radius:1.5rem;flex-direction:column;display:flex;position:relative}.snip-modal__head{justify-content:space-between;align-items:flex-start;gap:var(--space-6);display:flex}.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{gap:var(--space-6);flex:1;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);min-height:0;display:grid}.snip-modal__stage{background:var(--surface-raised);border-radius:1rem;min-height:18rem;overflow:hidden}.snip-modal__pen{color:var(--demo-hue,var(--ink-secondary));font-weight:inherit;text-underline-offset:.2em;background-image:linear-gradient(var(--demo-hue,var(--ink-secondary)), var(--demo-hue,var(--ink-secondary)));-webkit-box-decoration-break:clone;box-decoration-break:clone;background-position:0;background-repeat:no-repeat;background-size:0% 1.3em;text-decoration:underline;text-decoration-thickness:1px;transition:background-size .45s ease-in-out,color .45s ease-in-out}.snip-modal__pen:hover,.snip-modal__pen:focus-visible{color:var(--ink-on-colour);background-size:100% 1.3em;text-decoration:none}@media (prefers-reduced-motion:reduce){.snip-modal__pen{transition:none}}.snip-modal__details{gap:var(--space-6);flex-direction:column;min-height:0;display:flex;overflow:hidden}.snip-modal__details>section{flex-direction:column;flex:1;min-height:0;display:flex}.snip-modal__copy{color:var(--ink-secondary)}.snip-modal__tag--lib{align-items:baseline;gap:var(--space-2);display:inline-flex}.snip-modal__version{font-family:var(--font-mono);opacity:.6}.snip-modal__code-block{margin-top:var(--space-4);flex:1;min-height:0;display:flex;position:relative}.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);border-radius:var(--radius-lg);background:var(--surface-raised);font-family:var(--font-mono);color:var(--ink-secondary);white-space:pre-wrap;overflow-wrap:anywhere;overscroll-behavior:contain;flex:1;min-height:0;margin:0;padding-inline-end:3rem;font-size:.75rem;line-height:1.7;overflow:hidden auto}@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__details>section,.snip-modal__code-block,.snip-modal__code{flex:initial;min-height:auto;overflow:visible}}@media (max-width:48rem){.snip-modal{padding:var(--space-3)}.snip-modal__panel{padding:var(--space-5);gap:var(--space-5);border-radius:1.25rem;height:auto;min-height:0}.snip-modal__body{flex:1}.snip-modal__stage{min-height:min(20rem,42dvh)}}@media (max-height:30rem) and (max-width:56rem){.snip-modal__panel{padding:var(--space-4);gap:var(--space-4)}.snip-modal__stage{min-height:11rem}}
.snip-card{width:100%;height:100%;min-height:var(--card-height);background:var(--snip-bg,var(--surface-raised));color:var(--ink-secondary);text-align:left;font:inherit;cursor:pointer;transition:transform var(--duration-card) var(--ease-card);will-change:transform;border-radius:1.5rem;padding:0;scroll-margin-block-start:calc(var(--nav-height) + var(--space-6));text-decoration:none;position:relative;overflow:hidden}.snip-card__open{z-index:4;border-radius:inherit;cursor:pointer;pointer-events:none;background:0 0;border:0;margin:0;padding:0;position:absolute;inset:0}.snip-card__open:focus-visible{outline-offset:2px}.snip-card:hover{transform:scale(.97)}.snip-card__meta{justify-content:flex-end;min-height:3rem;display:flex}.snip-card__category{font-family:var(--font-sans);color:var(--snip-cat);font-weight:600}.snip-card__name{z-index:2;color:var(--colour-void-55);padding:var(--space-8);margin:0;position:relative}.snip-card .snippet-demo{pointer-events:none}.snip-card .demo-controls{display:none}.snip-card__display{border-radius:inherit;background:var(--snip-panel,var(--surface-raised));contain:size;position:absolute;inset:0;overflow:hidden}.lazy-mount{width:100%;height:100%}.snip-card__preview{object-fit:cover;width:100%;height:100%;display:block}