@layer components{.dev-icon{gap:56px;padding-block:clamp(24px,4vh,40px) clamp(64px,10vh,112px);display:grid}.dev-icon__stage,.dev-icon__panel{min-width:0}.dev-icon__stage{gap:24px;display:grid}@media (min-width:1024px){.dev-icon{grid-template-columns:repeat(12,minmax(0,1fr));align-items:start;column-gap:32px}.dev-icon__stage{grid-column:1/span 7;position:sticky;top:32px}.dev-icon__panel{grid-column:8/span 5}}@media (min-width:1280px){.dev-icon__stage{grid-column:1/span 8}.dev-icon__panel{grid-column:9/span 4}}.dev-icon__foot{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px 24px;padding-top:8px;display:flex}.dev-icon__sources{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.dev-icon__previews{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;display:grid}.dev-icon__preview{gap:14px;min-width:0;margin:0;display:grid}.dev-icon__canvas{aspect-ratio:1;background:color-mix(in srgb, var(--ground) 45%, transparent);border-radius:16px;place-items:center;padding:11%;display:grid;position:relative;overflow:clip}.dev-icon__canvas:after{content:"";pointer-events:none;border-radius:inherit;position:absolute;inset:0;box-shadow:inset 0 0 0 1px #ffffff1a}.dev-icon__canvas>:is(img,canvas){object-fit:contain;grid-area:1/1;width:100%;height:100%}.dev-icon__canvas>canvas{transition:opacity .16s}.dev-icon__canvas[aria-busy=true]>canvas{opacity:.55;transition-delay:.25s}.dev-icon__caption{font-variant-numeric:tabular-nums;color:var(--color-smoke);justify-content:space-between;align-items:baseline;gap:16px;font-size:13px;display:flex}.dev-icon__caption>:first-child{font-family:var(--font-display), ui-sans-serif, system-ui, sans-serif;font-size:18px;font-weight:var(--heading-weight);letter-spacing:-.01em;color:var(--color-bone)}.dev-icon__stats dd{font-variant-numeric:tabular-nums}.dev-icon__download{color:var(--color-smoke);align-items:center;gap:14px;font-size:13px;display:flex}.dev-icon__error{color:var(--color-bone);margin:0;font-size:14px}.dev-icon__panel-head{align-items:center;gap:12px;margin-bottom:20px;display:flex}.dev-icon__panel-head h2{font-family:var(--font-display), ui-sans-serif, system-ui, sans-serif;font-size:22px;font-weight:var(--heading-weight);letter-spacing:-.015em;color:var(--color-bone);margin:0;line-height:1.2}.dev-icon__panel-head p{font-variant-numeric:tabular-nums;color:var(--color-smoke);margin:0;font-size:13px}.dev-icon__panel-head .btn-raised{margin-left:auto}.dev-icon__controls{background:var(--dash);gap:18px;padding:20px 0 28px;display:grid}.dev-icon__controls h3{font-size:15px;font-weight:var(--ui-weight);color:var(--color-bone);margin:0}.dev-icon-desktop{background:radial-gradient(120% 100% at 0% 0%, color-mix(in srgb, var(--light) 30%, transparent), transparent 62%), radial-gradient(100% 90% at 100% 100%, color-mix(in srgb, var(--focus) 26%, transparent), transparent 64%), linear-gradient(160deg, var(--raised-top), color-mix(in srgb, var(--ground), black 20%));border-radius:16px;gap:20px;padding:28px 32px;display:grid;position:relative;overflow-x:auto}.dev-icon-desktop:after{content:"";pointer-events:none;border-radius:inherit;position:absolute;inset:0;box-shadow:inset 0 0 0 1px #ffffff12}.dev-icon-desktop__row{align-items:flex-end;gap:32px;display:flex}.dev-icon-desktop__row canvas{flex:none}.dev-icon-desktop__note{max-width:52ch;color:var(--color-smoke);margin:16px 0 0;font-size:14px;line-height:1.55}.dev-icon-drop{z-index:200;background:color-mix(in srgb, var(--ground) 80%, transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;pointer-events:none;place-items:center;padding:48px;transition:opacity .16s;display:grid;position:fixed;inset:0}.dev-icon-drop[data-visible=true]{opacity:1}.dev-icon-drop__target{aspect-ratio:1;border:1px dashed color-mix(in srgb, var(--bone) 35%, transparent);border-radius:22.5%;place-items:center;width:min(440px,100%);transition:transform .26s cubic-bezier(.2,.8,.2,1);display:grid;transform:scale(.96)}.dev-icon-drop[data-visible=true] .dev-icon-drop__target{transform:none}.dev-icon-drop__target span{font-size:18px;font-weight:var(--ui-weight);color:var(--color-bone)}@media (max-width:639px){.dev-icon__previews{gap:14px}.dev-icon__caption{flex-wrap:wrap;gap:2px 12px}}@media (prefers-reduced-motion:reduce){.dev-icon__canvas>canvas,.dev-icon-drop,.dev-icon-drop__target{transition:none}.dev-icon__canvas[aria-busy=true]>canvas{transition:opacity 0s .25s}}}