:root{--bg:#0a0a0a;--surface:#111;--surface-2:#161616;--border:#232323;--border-strong:#2e2e2e;--text:#e8e8e8;--text-muted:#9a9a9a;--accent:#8b7cff;--accent-soft:#8b7cff24;--radius:14px;--shadow:0 12px 30px -12px #0009;--sans:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--display:"Instrument Serif", Georgia, serif;--mono:ui-monospace, "SF Mono", Consolas, monospace;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html{overflow-x:clip}html,body{margin:0;padding:0}body{background:var(--bg);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;font-size:16px;line-height:1.5}::selection{background:var(--accent);color:#0a0a0a}:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:8px}::-webkit-scrollbar-track{background:var(--bg)}a{color:var(--accent)}.page{overflow-anchor:none;flex-direction:column;max-width:1120px;min-height:100svh;margin:0 auto;padding:0 24px;display:flex}.hero{isolation:isolate;padding:96px 0 72px;position:relative;overflow:hidden}.living-hero{z-index:-1;pointer-events:none;width:100%;height:100%;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000 55%,#0000 100%);mask-image:linear-gradient(#000 55%,#0000 100%)}.hero-inner{max-width:1120px;margin:0 auto;padding:0 24px;position:relative}.hero--fullbleed{width:100vw;margin-left:calc(50% - 50vw)}.hero-title-row{align-items:baseline;gap:16px;display:flex}.hero-title-row .byline{margin:0}a.byline-link{cursor:pointer;text-decoration:none}a.byline-link:hover{text-underline-offset:3px;text-decoration:underline}.wordmark{font-family:var(--display);letter-spacing:-.02em;color:var(--text);margin:0;font-size:clamp(3rem,9vw,6rem);font-weight:400;line-height:.95}.subtitle{color:var(--text-muted);letter-spacing:.01em;margin:12px 0 0;font-size:1.05rem}.byline{color:var(--accent);letter-spacing:.02em;margin:16px 0 0;font-size:.95rem;font-weight:500}.content{flex:1;padding:8px 0 64px}.controls{z-index:5;background:var(--bg);margin-bottom:24px;padding:16px 0;position:sticky;top:0}.search{background-color:var(--surface);border:1px solid var(--border);width:100%;color:var(--text);font-size:1rem;font-family:var(--sans);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><circle cx='7' cy='7' r='4.5' stroke='%239a9a9a' stroke-width='1.4' fill='none'/><line x1='10.5' y1='10.5' x2='14' y2='14' stroke='%239a9a9a' stroke-width='1.4' stroke-linecap='round'/></svg>");background-position:16px;background-repeat:no-repeat;border-radius:12px;padding:16px 16px 16px 40px;transition:border-color .2s,box-shadow .2s}.search::-webkit-search-decoration{-webkit-appearance:none}.search::placeholder{color:var(--text-muted)}.search:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);outline:none}.tagfilter{flex-wrap:wrap;gap:8px;margin-top:12px;display:flex}.chip{font-family:var(--mono);color:var(--text-muted);background:var(--surface);border:1px solid var(--border);cursor:pointer;border-radius:999px;padding:6px 12px;font-size:.82rem;transition:all .18s}.chip:hover{border-color:var(--border-strong);color:var(--text)}.chip-active{background:var(--accent-soft);border-color:var(--accent);color:var(--text)}.grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin:0;padding:0;list-style:none;display:grid}.grid>li{min-width:0;display:flex}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;gap:12px;width:100%;min-width:0;height:100%;min-height:160px;padding:16px;transition:transform .2s cubic-bezier(.2,.8,.2,1),border-color .2s,box-shadow .2s;display:flex}.card:hover{border-color:var(--border-strong);box-shadow:var(--shadow);transform:translateY(-3px)}.card-placeholder{opacity:.92;border-style:dashed}.card-head{justify-content:space-between;align-items:flex-start;gap:8px;display:flex}.card-title{font-family:var(--sans);color:var(--text);letter-spacing:-.01em;margin:0;font-size:1.1rem;font-weight:600}.badge{font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent);white-space:nowrap;border-radius:999px;padding:3px 8px;font-size:.66rem}.card-note{color:var(--text-muted);flex:1;margin:0;font-size:.92rem;line-height:1.45}.card-url{font-family:var(--mono);color:var(--text-muted);text-overflow:ellipsis;white-space:nowrap;grid-area:url;font-size:.78rem;text-decoration:none;transition:color .18s;display:block;overflow:hidden}.card-url:hover{color:var(--accent)}.card-foot{grid-template-columns:1fr auto;grid-template-areas:"url visited""tags visit";align-items:center;gap:8px 12px;display:grid}.tags{flex-wrap:wrap;grid-area:tags;gap:6px;margin:0;padding:0;list-style:none;display:flex}.tag{font-family:var(--mono);color:var(--text-muted);font-size:.74rem}.visit{color:var(--accent);font-size:.85rem;font-family:var(--sans);white-space:nowrap;grid-area:visit;justify-self:end;align-items:center;gap:4px;text-decoration:none;display:inline-flex}.visit:hover{text-decoration:underline}.card-head-main{align-items:center;gap:8px;min-width:0;display:flex}.fav-wrap{border:1px solid var(--border);background:#1c1c1e;border-radius:8px;flex:none;place-items:center;width:32px;height:32px;display:grid;overflow:hidden}.fav{border-radius:4px;width:22px;height:22px;display:block}.fav-monogram{font-family:var(--sans);color:var(--accent);text-transform:uppercase;font-size:.95rem;font-weight:700;line-height:1}.state-empty{color:var(--text-muted);text-align:center;padding:40px 0;font-size:1rem}.link-btn{color:var(--accent);cursor:pointer;font:inherit;background:0 0;border:none;padding:0;text-decoration:underline}.footer{border-top:1px solid var(--border);color:var(--text);font-family:var(--display);justify-content:space-between;align-items:baseline;gap:12px;padding:28px 0 40px;font-size:1.2rem;display:flex}.footer-muted{font-family:var(--sans);color:var(--text-muted);font-size:.82rem}@media (width<=640px){.hero{padding:64px 0 48px}.grid{grid-template-columns:1fr}}.proto-b-body{grid-template-columns:240px 1fr;align-items:start;gap:32px;padding:32px 0;display:grid}.proto-rail{flex-direction:column;gap:16px;display:flex;position:sticky;top:72px}.proto-rail-label{color:var(--text-muted);margin:4px 0 0;font-size:.8rem}.hero-compact{padding:72px 0 32px}.proto-c-body{grid-template-columns:320px 1fr;align-items:start;gap:28px;min-height:60vh;padding:28px 0;display:grid}.proto-list{flex-direction:column;gap:12px;display:flex;position:sticky;top:72px}.proto-list-items{flex-direction:column;gap:4px;max-height:60vh;margin:0;padding:0;list-style:none;display:flex;overflow-y:auto}.proto-list-item{text-align:left;width:100%;color:var(--text-muted);font-family:var(--sans);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:8px;padding:8px 12px;font-size:.92rem}.proto-list-item:hover{color:var(--text);background:var(--surface)}.proto-list-item.is-active{color:var(--text);background:var(--surface-2);border-color:var(--border)}.proto-detail{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:28px}.proto-detail-name{font-family:var(--display);margin:0 0 12px;font-size:2rem}.proto-detail-note{color:var(--text-muted);margin:0 0 16px;line-height:1.5}.proto-detail-url{font-family:var(--mono);color:var(--text-muted);margin:0 0 16px;font-size:.8rem}.proto-detail-tags{flex-wrap:wrap;gap:6px;margin-bottom:18px;display:flex}.ds-tag-preview{color:hsl(var(--h) 80% 78%);border:1px solid hsl(var(--h) 60% 55% / .5);background:hsl(var(--h) 60% 50% / .12);border-radius:4px;padding:4px 12px;font-size:.78rem}.proto-switcher{z-index:100;border:1px solid var(--border-strong);font-family:var(--sans);background:#1a1a1a;border-radius:999px;align-items:center;gap:16px;padding:8px 14px;display:flex;position:fixed;bottom:20px;left:50%;transform:translate(-50%);box-shadow:0 12px 30px -12px #000c}.proto-swatch-btn{color:var(--text);cursor:pointer;background:0 0;border:none;padding:0 8px;font-size:1.1rem}.proto-swatch-label{color:var(--text);text-align:center;min-width:180px;font-size:.85rem}.ds-page{padding-top:0}.ds-header{padding:80px 0 40px}.ds-content{flex-direction:column;gap:56px;padding-bottom:64px;display:flex}.ds-section{border-top:1px solid var(--border);padding-top:32px}.ds-h2{font-family:var(--display);letter-spacing:-.02em;color:var(--text);margin:0 0 8px;font-size:clamp(1.8rem,4vw,2.6rem);font-weight:400}.ds-h3{font-family:var(--sans);color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;margin:28px 0 12px;font-size:.9rem;font-weight:600}.ds-lead{color:var(--text-muted);margin:0 0 24px;font-size:.95rem}.ds-swatches{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;display:grid}.ds-swatch{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);align-items:flex-start;gap:12px;padding:16px;display:flex}.ds-chip{border:1px solid var(--border-strong);border-radius:10px;flex-shrink:0;width:44px;height:44px}.ds-swatch-meta{flex-direction:column;gap:3px;min-width:0;display:flex}.ds-swatch-name{color:var(--text);font-size:.92rem;font-weight:600}.ds-var,.ds-hex{font-family:var(--mono);color:var(--text-muted);font-size:.72rem}.ds-swatch-role{color:var(--text-muted);margin-top:2px;font-size:.8rem;line-height:1.35}.ds-tagrow{flex-wrap:wrap;gap:8px;display:flex}.ds-tagdemo{font-family:var(--mono);border:1px solid;border-radius:999px;padding:6px 12px;font-size:.82rem}.ds-type{flex-direction:column;gap:24px;display:flex}.ds-type-row{border-bottom:1px solid var(--border);flex-wrap:wrap;align-items:baseline;gap:20px;padding-bottom:20px;display:flex}.ds-type-sample{color:var(--text);min-width:280px;font-size:2rem}.ds-type-meta{flex-direction:column;gap:2px;display:flex}.ds-type-name{color:var(--text);font-weight:600}.ds-type-note{color:var(--text-muted);font-size:.82rem}.ds-components{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin:0;padding:0;list-style:none;display:grid}.ds-comp{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;gap:8px;padding:16px;display:flex}.ds-comp-planned{opacity:.92;border-style:dashed}.ds-comp-head{justify-content:space-between;align-items:center;gap:8px;display:flex}.ds-comp-name{color:var(--text);font-weight:600}.ds-comp-status{font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;flex-shrink:0;font-size:.66rem}.ds-comp-status-used{color:var(--accent);background:var(--accent-soft);border-radius:999px;padding:2px 8px}.ds-comp-status-planned{color:var(--text-muted);border:1px solid var(--border-strong);border-radius:999px;padding:2px 8px}.ds-comp-note{color:var(--text-muted);font-size:.82rem;line-height:1.4}.ds-principles{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;display:grid}.ds-principle{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);padding:16px}.ds-principle-t{font-family:var(--sans);color:var(--text);margin:0 0 6px;font-size:1rem;font-weight:600}.ds-principle-d{color:var(--text-muted);margin:0;font-size:.85rem;line-height:1.45}.controls-row{flex-wrap:nowrap;justify-content:space-between;align-items:flex-start;gap:16px;margin-top:14px;display:flex}.filter-side{flex:auto;min-width:0;margin-top:-12px}.sort-side{flex-flow:column wrap;flex:none;align-items:flex-end;gap:8px;display:flex}.sort-control{align-items:center;gap:8px;display:flex}.sort-label{color:var(--text-muted);white-space:nowrap;font-size:.8rem}.sort-select{appearance:none;background-color:var(--surface);color:var(--text);border:1px solid var(--border);font-family:var(--sans);cursor:pointer;white-space:nowrap;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M3 4.5L6 7.5L9 4.5' stroke='%239a9a9a' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");background-position:right 12px center;background-repeat:no-repeat;border-radius:8px;padding:8px 32px 8px 16px;font-size:.9rem;transition:border-color .18s,box-shadow .18s,background-color .18s}.sort-select:hover{border-color:var(--border-strong)}.sort-select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);outline:none}.sort-select option{background:var(--surface-2);color:var(--text)}.reset-link{color:var(--text-muted);cursor:pointer;font:inherit;text-underline-offset:3px;background:0 0;border:none;padding:0;font-size:.82rem;text-decoration:underline}.reset-link:hover{color:var(--accent)}.pick-badge{font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em;color:#e8c34a;white-space:nowrap;background:#e8c34a24;border:1px solid #e8c34a;border-radius:999px;padding:3px 8px;font-size:.66rem}.visited-meta{font-family:var(--mono);color:var(--text-muted);text-align:right;grid-area:visited;justify-self:end;margin:0;font-size:.72rem}.overlay{z-index:200;background:#0009;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{background:var(--surface-2);border:1px solid var(--border-strong);border-radius:var(--radius);width:calc(100% - 48px);max-width:380px;padding:24px}.modal h3{font-family:var(--sans);color:var(--text);margin:0 0 8px;font-size:1.05rem}.modal p{color:var(--text-muted);margin:0 0 20px;font-size:.9rem;line-height:1.5}.modal-actions{justify-content:flex-end;gap:8px;display:flex}.btn-danger{background:var(--accent);color:#0a0a0a;font-family:var(--sans);cursor:pointer;border:none;border-radius:10px;padding:9px 16px;font-weight:600}.btn-cancel{border:1px solid var(--border);color:var(--text-muted);font-family:var(--sans);cursor:pointer;background:0 0;border-radius:10px;padding:9px 16px}@media (width<=640px){.card-url{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.card-foot>.tags,.card-foot>.visit{min-width:0}.card-foot{row-gap:8px}.controls-row{flex-direction:column;align-items:stretch;gap:16px;margin-top:16px}.filter-side{margin-top:0}.sort-side{flex-direction:row;justify-content:space-between;align-self:stretch;align-items:center;gap:12px}.tagfilter{flex-flow:wrap;align-items:center;gap:8px;max-width:calc(100% + 24px);margin-top:0;margin-left:-24px;padding-left:24px;overflow:visible}.sort-label{display:none}.reset-link{align-self:auto}.sort-control{justify-content:flex-start;width:auto}.sort-select{flex:none;max-width:none}.controls-row{opacity:1;max-height:420px;margin-top:16px;transition:opacity .22s,transform .22s,max-height .24s,margin-top .24s;overflow:hidden;transform:translateY(0)}.controls-row.is-collapsed{opacity:0;pointer-events:none;max-height:0;margin-top:0;transform:translateY(-8px)}}@media (width>=641px) and (width<=1024px){.controls-row{gap:40px}}