.catalog-container{max-width:900px;margin:0 auto;padding:6rem 2rem 0;transition:max-width .3s ease,padding-right .3s ease}@media(min-width:769px){.catalog-container.drawer-open{max-width:100%;padding-right:calc(40% + 2rem)}}.catalog-section{margin-bottom:4rem;scroll-margin-top:100px}.section-header{margin-bottom:2rem}.section-title{font-size:2.5rem;margin:0 0 .5rem;color:var(--color-text-primary)}.section-subtitle{display:block;font-size:.9rem;color:var(--color-text-secondary);margin-bottom:1rem}.section-placeholder{color:var(--color-text-secondary);font-size:1.2rem}@media(max-width:768px){.catalog-container{padding:4rem 1rem 1rem}.section-title{font-size:2rem}}.category-section{margin-bottom:3rem}.category-title{font-size:1.5rem;margin-bottom:1.5rem;color:var(--color-text-primary);padding:.75rem 1rem;background:var(--color-accent);color:var(--color-bg-white);border-radius:4px}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:1rem}.animation-card{background:var(--color-bg-white);border:1px solid var(--color-bg-light);border-radius:8px;padding:1rem;cursor:pointer;transition:all .3s ease;display:flex;flex-direction:column;align-items:center;gap:.5rem}.animation-card:hover{border-color:var(--color-accent);transform:translateY(-2px);box-shadow:0 4px 12px var(--color-shadow-light)}.card-icon{width:80px;height:80px;display:flex;align-items:center;justify-content:center}.card-icon img{width:100%;height:100%;object-fit:contain}.card-title{font-size:.85rem;font-weight:700;color:var(--color-text-primary);text-align:center;margin:0;line-height:1.4}.detail-sections{margin-top:4rem}.detail-category{margin-bottom:3rem;scroll-margin-top:100px}.detail-category-title{font-size:1.2rem;margin-bottom:1rem;color:var(--color-accent)}.detail-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:.75rem}.detail-card{background:var(--color-bg-white);border:1px solid var(--color-bg-light);border-radius:8px;padding:.75rem;cursor:pointer;transition:all .3s ease;display:flex;flex-direction:column;align-items:center;gap:.5rem}.detail-card:hover{border-color:var(--color-accent);transform:translateY(-2px);box-shadow:0 4px 12px var(--color-shadow-light)}.detail-card-icon{width:60px;height:60px;display:flex;align-items:center;justify-content:center}.detail-card-icon img{width:100%;height:100%;object-fit:contain}.detail-card-title{font-size:.75rem;font-weight:700;color:var(--color-text-primary);text-align:center;margin:0;line-height:1.3}.codepen-drawer{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;pointer-events:none}.codepen-drawer.open{pointer-events:none}.codepen-drawer .drawer-content,.codepen-drawer .drawer-overlay{pointer-events:auto}@media(min-width:769px){.drawer-overlay{display:none}.drawer-content{position:fixed;top:0;right:0;width:40%;height:100%;background:var(--color-bg-white);box-shadow:-2px 0 8px #0000001a;transform:translate(100%);transition:transform .3s ease;display:flex;flex-direction:column}.codepen-drawer.open .drawer-content{transform:translate(0)}}@media(max-width:768px){.drawer-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#00000080;opacity:0;transition:opacity .3s ease}.codepen-drawer.open .drawer-overlay{opacity:1}.drawer-content{position:absolute;top:0;right:0;width:100%;height:100%;background:var(--color-bg-white);transform:translate(100%);transition:transform .3s ease;display:flex;flex-direction:column}.codepen-drawer.open .drawer-content{transform:translate(0)}}.drawer-close{position:absolute;top:1rem;right:1rem;background:transparent;border:none;font-size:2rem;color:var(--color-text-secondary);cursor:pointer;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s ease;z-index:10}.drawer-close:hover{background:var(--color-bg-light);color:var(--color-text-primary)}.drawer-header{padding:2rem 2rem 1rem;border-bottom:1px solid var(--color-bg-light)}.drawer-title{font-size:1.5rem;margin:0;color:var(--color-text-primary);padding-right:3rem}.drawer-body{flex:1;padding:2rem;overflow:auto}.codepen-iframe{width:100%;height:100%;min-height:500px;border:none;border-radius:4px}@media(max-width:768px){.card-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}.detail-card-grid{grid-template-columns:repeat(auto-fill,minmax(80px,1fr))}.codepen-iframe{min-height:400px}}main[data-astro-cid-6kjp6l6a]{width:100%}