*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--font-mono: "JetBrains Mono", monospace;--text-2xl: 32px;--text-xl: 24px;--text-lg: 18px;--text-md: 14px;--text-sm: 12px;--text-xs: 11px;--bg: #F5F2EC;--fg: #161718;--fg2: #525252;--fg3: #A3A3A3;--border: #161718;--surface: #FFFFFF;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-mono);background:var(--bg);color:var(--fg);min-height:100vh}#root{width:100%}a{color:inherit;text-decoration:none}button{font-family:var(--font-mono);cursor:pointer}input{font-family:var(--font-mono)}.ds-card{display:flex;flex-direction:column;border:2px solid var(--border);background:var(--surface);cursor:pointer;transition:transform .1s;text-decoration:none;color:inherit}.ds-card:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--border)}.ds-card__screenshot{width:100%;aspect-ratio:16/9;background:var(--bg);overflow:hidden;border-bottom:2px solid var(--border)}.ds-card__screenshot img{width:100%;height:100%;object-fit:cover}.ds-card__no-screenshot{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:var(--text-xs);letter-spacing:1.5px;color:var(--fg3)}.ds-card__body{padding:16px;display:flex;flex-direction:column;gap:10px}.ds-card__header{display:flex;justify-content:space-between;align-items:baseline;gap:8px}.ds-card__name{font-size:var(--text-md);font-weight:700;letter-spacing:.5px;text-transform:uppercase}.ds-card__url{font-size:var(--text-xs);color:var(--fg3);letter-spacing:.5px}.ds-card__tags{display:flex;flex-wrap:wrap;gap:4px}.ds-tag{font-size:var(--text-xs);letter-spacing:1px;text-transform:uppercase;padding:2px 8px;border:1px solid var(--border);color:var(--fg)}.color-swatch{display:flex;gap:4px}.color-dot{width:16px;height:16px;border:1px solid rgba(0,0,0,.1);flex-shrink:0}.gallery{max-width:1200px;margin:0 auto;padding:48px 24px}.gallery-header{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid var(--border);padding-bottom:16px;margin-bottom:32px}.gallery-title{font-size:var(--text-2xl);font-weight:700;letter-spacing:2px}.gallery-count{font-size:var(--text-xs);color:var(--fg3);letter-spacing:1.5px}.gallery-controls{display:flex;flex-direction:column;gap:12px;margin-bottom:32px}.gallery-search{width:100%;max-width:320px;padding:8px 12px;border:2px solid var(--border);background:var(--surface);font-size:var(--text-sm);letter-spacing:1px;outline:none;color:var(--fg)}.gallery-search:focus{outline:2px solid var(--fg);outline-offset:2px}.gallery-filters{display:flex;flex-wrap:wrap;gap:6px}.filter-btn{padding:4px 12px;font-size:var(--text-xs);letter-spacing:1.5px;border:2px solid var(--border);background:transparent;color:var(--fg);transition:background .1s,color .1s}.filter-btn:hover,.filter-btn--active{background:var(--fg);color:var(--bg)}.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px}.gallery-empty{font-size:var(--text-sm);color:var(--fg3);letter-spacing:1.5px;padding:48px 0;text-align:center}.detail{max-width:1000px;margin:0 auto;padding:48px 24px}.detail-loading{display:flex;align-items:center;justify-content:center;height:100vh;font-size:var(--text-sm);letter-spacing:1.5px;color:var(--fg3)}.detail-nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px;font-size:var(--text-sm);letter-spacing:1px}.detail-back{color:var(--fg);text-decoration:none;letter-spacing:1px}.detail-back:hover{text-decoration:underline}.detail-meta{display:flex;gap:16px;color:var(--fg3);font-size:var(--text-xs)}.detail-meta a{color:var(--fg2)}.detail-meta a:hover{color:var(--fg)}.detail-hero{display:grid;grid-template-columns:1fr 1fr;gap:32px;border:2px solid var(--border);padding:24px;background:var(--surface);margin-bottom:48px}@media(max-width:640px){.detail-hero{grid-template-columns:1fr}}.detail-screenshot img{width:100%;height:auto;display:block;border:1px solid var(--border)}.detail-info{display:flex;flex-direction:column;gap:16px}.detail-title{font-size:var(--text-xl);font-weight:700;letter-spacing:1px;text-transform:uppercase}.detail-tags{display:flex;flex-wrap:wrap;gap:4px}.ds-tag{font-size:var(--text-xs);letter-spacing:1px;text-transform:uppercase;padding:2px 8px;border:1px solid var(--border)}.ds-tag--stack{border-color:var(--fg3);color:var(--fg2)}.detail-notes{font-size:var(--text-sm);color:var(--fg2);line-height:1.6}.btn-copy{padding:10px 20px;border:2px solid var(--border);background:var(--fg);color:var(--bg);font-size:var(--text-xs);letter-spacing:1.5px;align-self:flex-start;margin-top:auto}.btn-copy:hover{opacity:.85}.detail-sections{display:flex;flex-direction:column;gap:48px}.section-title{font-size:var(--text-xs);letter-spacing:2px;color:var(--fg3);margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid var(--border)}.colors-grid{display:flex;flex-wrap:wrap;gap:12px}.color-card{display:flex;flex-direction:column;gap:4px;width:80px}.color-preview{width:80px;height:48px;border:1px solid rgba(0,0,0,.1)}.color-name{font-size:var(--text-xs);color:var(--fg2);letter-spacing:.5px}.color-value{font-size:var(--text-xs);color:var(--fg3)}.typo-list{display:flex;flex-direction:column;gap:12px}.typo-row{display:flex;gap:16px;align-items:baseline;border-bottom:1px solid rgba(0,0,0,.06);padding-bottom:8px}.typo-label{font-size:var(--text-xs);color:var(--fg3);letter-spacing:1px;width:60px;flex-shrink:0}.typo-value{font-size:var(--text-sm)}.typo-scale{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}.typo-size-sample{color:var(--fg2)}.spacing-list{display:flex;flex-direction:column;gap:8px}.spacing-row{display:flex;align-items:center;gap:12px}.spacing-label{font-size:var(--text-xs);color:var(--fg3);width:40px;flex-shrink:0}.spacing-bar{height:8px;background:var(--fg);flex-shrink:0}.radius-list{display:flex;gap:24px;flex-wrap:wrap}.radius-item{display:flex;flex-direction:column;align-items:center;gap:8px}.radius-preview{width:40px;height:40px}.radius-label{font-size:var(--text-xs);color:var(--fg3)}.components-grid{display:flex;flex-direction:column;gap:16px}.component-level-label{font-size:var(--text-xs);letter-spacing:1.5px;color:var(--fg2);display:block;margin-bottom:8px}.component-list{display:flex;flex-wrap:wrap;gap:6px}.component-item{font-size:var(--text-xs);padding:3px 10px;border:1px solid var(--border);letter-spacing:.5px}