[data-astro-cid-hbbm5icc][ui-page=examples]{display:flex;flex-direction:column;gap:var(--spacing-48);>.head[data-astro-cid-hbbm5icc]{display:grid;align-items:center;grid-template-columns:repeat(3,1fr);.title{font:var(--font-headline-lg);text-align:center}}>.core[data-astro-cid-hbbm5icc]{display:grid;gap:var(--spacing-24);grid-template-columns:repeat(3,1fr);.screen{height:70vh;overflow:hidden;border-radius:var(--radius-lg);border:1px solid var(--color-surface-variant);display:flex;flex-direction:column;.head{padding:var(--spacing-16);background-color:var(--color-surface-container-lowest);border-block-end:1px solid var(--color-surface-variant);display:flex;align-items:center;gap:var(--spacing-8);.title{font:var(--font-body-sm);text-transform:uppercase;color:var(--color-on-surface-variant)}.dots{display:flex;gap:var(--spacing-4);.dot{clip-path:circle();width:var(--spacing-10);height:var(--spacing-10);background-color:var(--color-primary);&:nth-child(2){opacity:.6}&:last-child{opacity:.3}}}}.content{flex:2;padding:var(--spacing-24)}&:first-child{grid-column:1 / 4;height:auto;.content{display:grid;align-items:center;justify-content:center;grid-template-columns:repeat(auto-fill,300px);gap:var(--spacing-24);.collection{display:grid;gap:var(--spacing-12);.group{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--spacing-12)}.field{display:flex;align-items:flex-start;gap:var(--spacing-24);.info{display:grid;gap:var(--spacing-4);.hint{font:var(--font-body-sm);color:var(--color-on-surface-variant)}}}.alert{box-shadow:var(--shadow-lg);border-radius:var(--radius-lg);padding:calc(var(--spacing-16) + var(--spacing-4));background-color:var(--color-surface-container-lowest);display:grid;gap:var(--spacing-8);.icon{width:40px;height:40px;clip-path:circle();display:flex;align-items:center;justify-content:center;color:var(--color-primary);background-color:var(--color-primary-container);>i{font-size:18px}}.headings{display:grid;gap:var(--spacing-8);.title{font:var(--font-title-md)}.description{text-wrap:auto;color:var(--color-on-surface-variant)}}.actions{display:grid;gap:var(--spacing-8);grid-template-columns:repeat(2,1fr);margin-block-start:var(--spacing-12)}}}}}&:nth-child(2){.content{color:var(--color-on-primary);background-color:var(--color-primary);display:flex;flex-direction:column;justify-content:space-between;.heading{text-transform:capitalize;font:var(--font-display-md);span{color:var(--color-primary-container)}}svg{width:60%;height:60%;transform:rotate(15deg) translate(80%);path{fill:var(--color-primary-container)}}}}&:nth-child(3){.content{color:var(--color-on-primary-container);background-color:var(--color-primary-container);display:flex;flex-direction:column;justify-content:space-between;gap:var(--spacing-12);.welcome{font:var(--font-title-lg)}.characters{flex:2;display:flex;align-items:center;justify-content:center;svg{width:40%;height:40%;transform:translateY(-15%);&:last-child{transform:translateY(15%)}}}.bottom-bar{display:grid;grid-template-columns:repeat(3,auto);padding:var(--spacing-8);border-radius:var(--radius-rounded);background-color:var(--color-on-primary)}}}&:nth-child(4){--color-primary: var(--color-secondary);--color-on-primary: var(--color-on-secondary);--color-primary-container: var(--color-secondary-container);--color-on-primary-container: var(--color-on-secondary-container);.content{color:var(--color-on-primary-container);display:flex;flex-direction:column;justify-content:space-between;gap:var(--spacing-12);.nav{display:flex;align-items:center;justify-content:space-between}.achievement{display:grid;gap:var(--spacing-24);.character{height:fit-content;text-align:center;svg{width:20%;height:20%}}.tips{display:grid;gap:var(--spacing-12);.heading{font:var(--font-title-md)}.items{display:grid;gap:var(--spacing-8);.item{[ui-slot=button]{width:100%;justify-content:flex-start}}}}}}}}}@media(max-width:1280px){>.core[data-astro-cid-hbbm5icc]{grid-template-columns:repeat(2,1fr);.screen{&:first-child{grid-column:1 / 3}}}}@media(max-width:1024px){>.core[data-astro-cid-hbbm5icc]{grid-template-columns:1fr;.screen{&:first-child{grid-column:1 / 2;.content{grid-template-columns:1fr;.collection{.alert{.actions{grid-template-columns:1fr}}}}}}}}@media(max-width:769px){>.head[data-astro-cid-hbbm5icc]{display:flex!important;flex-direction:column-reverse;gap:var(--spacing-12)}}}