/* LinkLoom styles: small, accessible, responsive */
:root{
  --bg:#0b0c10;
  --fg:#e5e7eb;
  --muted:#9ca3af;
  --card:#0f172a;
  --border:rgba(255,255,255,.08);
  --brand:#0ea5e9;
  --ring: rgba(14,165,233,.35);
  --shadow: 0 10px 25px rgba(0,0,0,.35);
  color-scheme: light dark;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f8fafc;
    --fg:#0b1220;
    --muted:#475569;
    --card:#ffffff;
    --border:rgba(2,6,23,.12);
    --brand:#0ea5e9;
    --ring: rgba(14,165,233,.25);
    --shadow: 0 10px 30px rgba(2,6,23,.08);
  }
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: radial-gradient(1200px 600px at 75% -20%, rgba(14,165,233,.15), transparent 60%),
              radial-gradient(900px 600px at -10% 120%, rgba(168,85,247,.18), transparent 60%),
              var(--bg);
  color:var(--fg);
}
.container{
  width:min(720px, 100%);
  margin-inline:auto;
  padding: 28px;
}
.profile{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding: 8px 0 18px;
  border-bottom:1px solid var(--border);
}
.avatar{
  width:112px;height:112px;border-radius:50%;
  border:3px solid var(--border);
  background:#e2e8f0; object-fit:cover;
}
.name{font-size: clamp(24px, 4vw, 36px);line-height:1.1;margin:0}
.bio{margin:6px 0 0;color:var(--muted)}
.links{ display:grid; gap:12px; margin:22px 0 }
.link{
  display:flex; align-items:center; gap:12px;
  padding:14px 16px; border-radius:14px; background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)), var(--card);
  border:1px solid var(--border); text-decoration:none; color:inherit; box-shadow: var(--shadow);
  transition: transform .05s ease, outline-color .15s ease;
  outline: 2px solid transparent; outline-offset: 2px;
}
.link:active{ transform: translateY(1px) }
.link:focus-visible{ outline-color: var(--ring) }
.link .icon{ width:22px; height:22px; flex:0 0 22px }
.link .grow{ flex:1 }
.link .hint{ color:var(--muted); font-size: 13px }
.footer{ display:flex; align-items:center; gap:12px; justify-content:space-between; margin-top: 24px; }
.brand{display:inline-flex; gap:8px; align-items:center; text-decoration:none; color:var(--muted);font-size:14px}
.btn{
  appearance:none;border:1px solid var(--border);background:transparent;color:inherit;border-radius:10px;
  padding:10px 12px; cursor:pointer; font-weight:600;
}
.btn.small{ font-size: 13px; padding: 8px 10px }
.sr-only{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
