@layer pages{.catalog{max-width:960px;padding:var(--space-xl);margin:0 auto}.catalog-title{color:var(--color-netsuki-navy);margin-bottom:var(--space-xs);font-size:var(--font-size-lg)}.catalog-description{color:var(--color-netsuki-gray);margin-bottom:var(--space-xl);font-size:var(--font-size-base)}.catalog-nav{gap:var(--space-xs);border-bottom:2px solid var(--color-netsuki-navy);margin-bottom:var(--space-2xl);padding-bottom:var(--space-sm);flex-wrap:wrap;display:flex}.catalog-nav-link{border:1px solid var(--color-netsuki-navy);border-radius:var(--radius-sm);padding:var(--space-2xs) var(--space-sm);font-size:var(--font-size-sm);color:var(--color-netsuki-navy);text-decoration:none}@media (any-hover:hover){.catalog-nav-link:hover{background-color:var(--color-netsuki-navy);color:var(--color-netsuki-white)}}.catalog-section{border:2px solid var(--color-netsuki-navy);margin-bottom:var(--space-2xl);padding:var(--space-lg)}.catalog-section-description{color:var(--color-netsuki-gray);margin-bottom:var(--space-base);font-size:var(--font-size-base)}.catalog-subsection-title{border-bottom:1px solid var(--color-netsuki-navy);color:var(--color-netsuki-navy);margin-top:var(--space-lg);margin-bottom:var(--space-base);padding-bottom:var(--space-2xs);font-size:var(--font-size-base)}.catalog-subsection-title:first-of-type{margin-top:0}.catalog-code{border:1px solid var(--color-netsuki-gray-light);border-radius:var(--radius-xs);background-color:var(--color-netsuki-gray-light);padding:0 var(--space-2xs);font-size:var(--font-size-xs);color:var(--color-netsuki-navy);display:inline-block}.catalog-button-grid{gap:var(--space-base);flex-direction:column;display:flex}.catalog-button-row{border:1px solid var(--color-netsuki-gray-light);border-radius:var(--radius-sm);padding:var(--space-sm)}.catalog-button-row-label{color:var(--color-netsuki-navy);margin-bottom:var(--space-xs);font-size:var(--font-size-sm)}.catalog-button-row-items{gap:var(--space-base);flex-wrap:wrap;align-items:flex-end;display:flex}.catalog-button-cell{gap:var(--space-2xs);flex-direction:column;align-items:flex-start;display:flex}.catalog-color-grid{gap:var(--space-sm);grid-template-columns:repeat(auto-fill,minmax(200px,1fr));display:grid}.catalog-color-item{gap:var(--space-2xs);border:1px solid var(--color-netsuki-gray-light);border-radius:var(--radius-sm);padding:var(--space-xs);flex-direction:column;display:flex}.catalog-color-swatch{border:1px solid var(--color-netsuki-navy);border-radius:var(--radius-xs);height:3rem}.catalog-color-hex,.catalog-color-role{font-size:var(--font-size-xs);color:var(--color-netsuki-gray)}.catalog-typography-list{gap:var(--space-base);flex-direction:column;display:flex}.catalog-typography-item{border-bottom:1px solid var(--color-netsuki-gray-light);padding-bottom:var(--space-sm)}.catalog-typography-sample{color:var(--color-netsuki-navy);margin-bottom:var(--space-2xs)}.catalog-typography-meta{gap:var(--space-xs);align-items:center;display:flex}.catalog-typography-value{font-size:var(--font-size-xs);color:var(--color-netsuki-gray)}.catalog-spacing-list{gap:var(--space-sm);flex-direction:column;display:flex}.catalog-spacing-item{gap:var(--space-base);align-items:center;display:flex}.catalog-spacing-bar{border:1px solid var(--color-netsuki-navy);border-radius:var(--radius-xs);background-color:var(--color-netsuki-aqua);min-width:4px;height:1.5rem}.catalog-spacing-meta{gap:var(--space-xs);align-items:center;display:flex}.catalog-spacing-value{font-size:var(--font-size-xs);color:var(--color-netsuki-gray)}.catalog-component-list{gap:var(--space-base);flex-direction:column;display:flex}.catalog-component-item{margin-bottom:var(--space-sm)}.catalog-component-label{color:var(--color-netsuki-navy);margin-bottom:var(--space-xs);font-size:var(--font-size-sm)}.catalog-colormix-grid{gap:var(--space-sm);grid-template-columns:repeat(3,1fr);display:grid}.catalog-colormix-item{gap:var(--space-2xs);flex-direction:column;align-items:center;display:flex}.catalog-colormix-swatch{border:1px solid var(--color-netsuki-navy);border-radius:var(--radius-sm);width:100%;height:4rem}.catalog-pattern-grid{gap:var(--space-base);grid-template-columns:repeat(auto-fill,minmax(280px,1fr));display:grid}.catalog-pattern-item{gap:var(--space-xs);border:1px solid var(--color-netsuki-navy);border-radius:var(--radius-sm);flex-direction:column;display:flex;overflow:hidden}.catalog-pattern-preview{height:6rem}.catalog-pattern-info{padding:var(--space-xs);gap:var(--space-2xs);flex-direction:column;display:flex}.catalog-pattern-label{font-size:var(--font-size-sm);color:var(--color-netsuki-navy);font-weight:700}.catalog-pattern-desc{font-size:var(--font-size-xs);color:var(--color-netsuki-gray)}.catalog-pattern-badge{border:1px solid var(--color-netsuki-green-vivid);border-radius:var(--radius-xs);background-color:color-mix(in srgb, var(--color-netsuki-green-vivid) 15%, transparent);padding:0 var(--space-2xs);font-size:var(--font-size-xs);color:var(--color-netsuki-green-dark);align-self:flex-start;display:inline-block}.catalog-responsive-table{border-collapse:collapse;width:100%;font-size:var(--font-size-sm)}.catalog-responsive-table th{background-color:var(--color-netsuki-aqua);border:2px solid var(--color-netsuki-navy);padding:var(--space-xs);color:var(--color-netsuki-navy);text-align:left}.catalog-responsive-table td{border:1px solid var(--color-netsuki-gray-light);padding:var(--space-xs);color:var(--color-netsuki-navy)}.catalog-responsive-table code{font-size:var(--font-size-xs);color:var(--color-netsuki-navy);background:0 0;border:none;padding:0;display:inline}.catalog-responsive-demo{gap:var(--space-xs);border:2px solid var(--color-netsuki-navy);padding:var(--space-base);flex-direction:column;display:flex}.catalog-responsive-indicator{border:2px solid var(--color-netsuki-navy);border-radius:var(--radius-sm);padding:var(--space-base);text-align:center;color:var(--color-netsuki-white);font-weight:700}.catalog-responsive-indicator--mobile{background-color:var(--color-netsuki-red);display:block}.catalog-responsive-indicator--tablet{background-color:var(--color-netsuki-gold);display:none}.catalog-responsive-indicator--desktop{background-color:var(--color-netsuki-green-vivid);display:none}@media (width>=640px){.catalog-responsive-indicator--mobile{display:none}.catalog-responsive-indicator--tablet{display:block}}@media (width>=768px){.catalog-responsive-indicator--tablet{display:none}.catalog-responsive-indicator--desktop{display:block}}.catalog-responsive-layout-demo{gap:var(--space-sm);border:2px solid var(--color-netsuki-navy);padding:var(--space-base);grid-template-columns:1fr;display:grid}@media (width>=640px){.catalog-responsive-layout-demo{grid-template-columns:repeat(2,1fr)}}@media (width>=768px){.catalog-responsive-layout-demo{grid-template-columns:repeat(3,1fr)}}.catalog-responsive-box{border:2px solid var(--color-netsuki-navy);border-radius:var(--radius-sm);background-color:var(--color-netsuki-aqua);padding:var(--space-base);text-align:center;color:var(--color-netsuki-white);font-weight:700}.catalog-font-list{gap:var(--space-base);flex-direction:column;display:flex}.catalog-font-item{border:1px solid var(--color-netsuki-gray-light);border-radius:var(--radius-sm);padding:var(--space-sm)}.catalog-font-sample{color:var(--color-netsuki-navy);font-size:var(--font-size-md);margin-bottom:var(--space-2xs)}.catalog-font-meta{gap:var(--space-xs);flex-wrap:wrap;align-items:center;display:flex}.catalog-font-type{font-size:var(--font-size-xs);color:var(--color-netsuki-gray);border:1px solid var(--color-netsuki-gray-border);border-radius:var(--radius-xs);padding:0 var(--space-2xs)}.catalog-tag-demo{gap:var(--space-sm);flex-wrap:wrap;align-items:center;display:flex}.catalog-navcard-grid{gap:var(--space-base);grid-template-columns:repeat(2,1fr);display:grid}.catalog-form-demo{gap:var(--space-base);flex-direction:column;display:flex}.catalog-form-field{gap:var(--space-2xs);flex-direction:column;display:flex}.catalog-form-label{font-size:var(--font-size-sm);color:var(--color-netsuki-navy);font-weight:700}.catalog-form-input,.catalog-form-select{border:2px solid var(--color-netsuki-navy);padding:var(--space-xs);font-size:var(--font-size-base)}.catalog-form-textarea{border:2px solid var(--color-netsuki-navy);padding:var(--space-xs);font-size:var(--font-size-base);resize:vertical}.ease-demo:where(.astro-ci3fgbl6){background-color:var(--color-netsuki-navy);border-radius:var(--radius-sm);block-size:2.5rem;inline-size:2.5rem;animation-duration:1.2s;animation-iteration-count:infinite;animation-direction:alternate;animation-fill-mode:both}.ease-demo--out:where(.astro-ci3fgbl6){animation-name:ease-demo-slide;animation-timing-function:var(--ease-out)}.ease-demo--in-out:where(.astro-ci3fgbl6){animation-name:ease-demo-slide;animation-timing-function:var(--ease-in-out)}@keyframes ease-demo-slide{0%{transform:translate(0)}to{transform:translate(12rem)}}}