: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}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{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:14px 0 0;font-size:.95rem;font-weight:500}.content{flex:1;padding:8px 0 64px}.controls{z-index:5;background:linear-gradient(var(--bg) 72%, transparent);margin-bottom:24px;padding:16px 0;position:sticky;top:0}.search{background:var(--surface);border:1px solid var(--border);width:100%;color:var(--text);font-size:1rem;font-family:var(--sans);border-radius:12px;padding:14px 16px;transition:border-color .2s,box-shadow .2s}.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{display:flex}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;gap:12px;width:100%;height:100%;min-height:160px;padding:20px;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:10px;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;font-size:.78rem;text-decoration:none;transition:color .18s;display:block;overflow:hidden}.card-url:hover{color:var(--accent)}.card-foot{justify-content:space-between;align-items:center;gap:10px;display:flex}.tags{flex-wrap:wrap;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;align-items:center;gap:4px;text-decoration:none;display:inline-flex}.visit:hover{text-decoration:underline}.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:14px;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 10px;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 10px;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:14px;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 6px;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:14px;display:grid}.ds-swatch{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);align-items:flex-start;gap:12px;padding:14px;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:12px;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:10px;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:18px}.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}