*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#191716;--fg:#daba8b;--surface:#0f0e0d;--primary:#a17e3e;--secondary:#5c6652;--border:#383332;--text-muted:#898471}
body{background:var(--bg);color:var(--fg);font-family:"IBM Plex Mono",monospace;-webkit-font-smoothing:antialiased}
::selection{background:var(--primary);color:var(--surface)}

.wrapper{max-width:48rem;margin:0 auto;padding:2.5rem 1rem 0}
@media(min-width:768px){.wrapper{padding-top:4rem}}

.header{margin-bottom:2.5rem}
.header-top{display:flex;align-items:flex-start;gap:1rem}
.avatar{width:4rem;height:4rem;flex-shrink:0}
@media(min-width:768px){.avatar{width:5rem;height:5rem}}
.title{font-size:1.5rem;font-weight:700;letter-spacing:-.025em;margin-bottom:.5rem;color:var(--primary)}
@media(min-width:768px){.title{font-size:1.875rem}}
.bio{color:var(--text-muted);font-size:.875rem;line-height:1.5;border-left:1px solid rgb(161 126 62 / .5);padding-left:.75rem}
@media(min-width:768px){.bio{font-size:1rem}}
.links{display:flex;gap:1rem;margin-top:1.25rem}
.links a{display:flex;align-items:center;gap:.375rem;color:var(--text-muted);font-size:.75rem;text-decoration:none;transition:color .15s}
.links a:hover{color:var(--primary)}
.links .icon{width:.875rem;height:.875rem}

.section{margin-bottom:2.5rem}
.section-header{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}
.section-header h2{font-size:.75rem;font-weight:700;color:var(--secondary);text-transform:uppercase;letter-spacing:.1em;white-space:nowrap}
.section-header .line{height:1px;background:rgb(56 51 50 / .5);flex:1}

.deployed-list{display:flex;flex-direction:column;gap:.25rem}
.deployed-item{position:relative}
.deployed-item::before{content:'';position:absolute;inset:0 -.5rem;background:rgb(15 14 13 / .5);border-radius:.25rem;opacity:0;transition:opacity .15s;z-index:-1}
.deployed-item:hover::before{opacity:1}
.deployed-row{display:flex;flex-direction:column;justify-content:space-between;gap:.25rem;padding:.5rem 0;border-bottom:1px solid rgb(56 51 50 / .3);transition:border-color .15s}
@media(min-width:640px){.deployed-row{flex-direction:row;align-items:center;gap:1rem}}
.deployed-item:last-child .deployed-row{border-bottom:none}
.deployed-item:hover .deployed-row{border-bottom-color:transparent}
.deployed-left{display:flex;align-items:baseline;gap:.5rem;min-width:0}
.deployed-meta{display:flex;align-items:center;gap:1rem;flex-shrink:0}
.deployed-title{font-size:1rem;font-weight:700;color:var(--fg);text-decoration:none;transition:color .15s;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.deployed-item:hover .deployed-title{color:var(--primary)}
.deployed-desc{display:none;color:var(--text-muted);font-size:.75rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(min-width:768px){.deployed-desc{display:inline}}
.deployed-source{display:inline-flex;align-items:center;gap:.25rem;color:var(--text-muted);font-size:.625rem;text-decoration:none;text-transform:uppercase;letter-spacing:-.05em;transition:color .15s}
.deployed-source:hover{color:var(--fg)}
.deployed-source .icon{width:.75rem;height:.75rem}
.deployed-mobile-desc{color:var(--text-muted);font-size:.688rem}
@media(min-width:768px){.deployed-mobile-desc{display:none}}

.self-hosted-grid{display:grid;grid-template-columns:1fr;gap:.75rem}
@media(min-width:640px){.self-hosted-grid{grid-template-columns:1fr 1fr}}
.sh-card{display:block;border:1px solid rgb(56 51 50 / .3);padding:.75rem;text-decoration:none;background:rgb(15 14 13 / .2);transition:border-color .15s}
.sh-card:hover{border-color:rgb(161 126 62 / .5)}
.sh-card.wide{grid-column:1/-1}
.card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:.25rem}
.card-title{font-size:.875rem;font-weight:700;color:var(--fg);transition:color .15s}
.sh-card:hover .card-title{color:var(--primary)}
.card-icon{width:.875rem;height:.875rem;color:var(--text-muted);transition:color .15s}
.sh-card:hover .card-icon{color:var(--primary)}
.card-desc{color:var(--text-muted);font-size:.688rem;line-height:1.625}

.footer{margin-top:2rem;text-align:center;padding-bottom:2rem}
.footer p{color:var(--text-muted);font-size:.75rem}
.footer a{color:var(--primary);text-decoration:none;transition:all .15s}
.footer a:hover{text-decoration:underline}

#svg-defs{display:none}

::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:0}
::-webkit-scrollbar-thumb:hover{background:#57553c}