:root{
  --bg:#0c0f16;
  --s1:#101421;
  --s2:#151a28;
  --s3:#1c2232;
  --s4:#242c40;
  --bd:#1f2535;
  --bd2:#2d3550;
  --wh:#eef3ff;
  --tx:#cfd7e6;
  --tx2:#a6b0c4;
  --dim:#7d879d;
  --faint:#566078;
  --accent:#d87094;
  --accent-soft:rgba(216,112,148,.14);
  --accent-line:rgba(216,112,148,.3);
  --live:#6fd5ff;
  --live-soft:rgba(111,213,255,.15);
  --r:14px;
}

*{box-sizing:border-box}

html,
body{
  min-height:100%;
  background:
    radial-gradient(circle at top left, rgba(75,105,255,.08), transparent 22%),
    radial-gradient(circle at bottom right, rgba(85,145,255,.08), transparent 28%),
    linear-gradient(180deg, #0b0e15 0%, #090c13 100%);
  background-color:#090c13;
}

body{
  margin:0;
  min-height:100dvh;
  font-family:'DM Sans',sans-serif;
  color:var(--tx);
}

.links-shell{
  min-height:100dvh;
  display:grid;
  place-items:center;
  padding:calc(20px + env(safe-area-inset-top, 0px)) 16px calc(20px + env(safe-area-inset-bottom, 0px));
}

.links-panel{
  width:360px;
  min-width:360px;
  max-width:100%;
  height:calc(100dvh - 56px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  max-height:860px;
  background:var(--s1);
  border:1px solid var(--bd);
  border-radius:var(--r);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.38);
}

.links-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:12px 16px;
  border-bottom:1px solid var(--bd);
  flex-shrink:0;
}

.links-kicker{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--dim);
  font-family:'DM Mono',monospace;
}

.links-tabs{
  display:flex;
  gap:2px;
  flex:0 0 272px;
  margin-left:auto;
  background:var(--s2);
  border-radius:6px;
  padding:2px;
}

.links-tab{
  flex:1;
  height:34px;
  padding:0 10px;
  border:none;
  border-radius:5px;
  background:transparent;
  color:var(--dim);
  font-family:'DM Sans',sans-serif;
  font-size:12px;
  font-weight:500;
  cursor:pointer;
  transition:background .13s,color .13s;
}

.links-tab.on{
  background:var(--s3);
  color:var(--wh);
}

.links-body{
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:9px;
  flex:1;
  min-height:0;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:var(--s3) transparent;
  overscroll-behavior:contain;
}

.links-profile{
  padding:0;
  display:flex;
  align-items:center;
  gap:11px;
}

.links-avatar{
  width:70px;
  height:70px;
  border-radius:50%;
  background:var(--s3);
  border:1px solid var(--bd);
  color:var(--dim);
  display:grid;
  place-items:center;
  font-size:28px;
  flex:0 0 auto;
}

.links-profile-copy h1{
  margin:0 0 4px;
  font-size:14px;
  line-height:1.1;
  color:var(--wh);
  font-weight:700;
}

.links-profile-copy p{
  margin:0;
  font-size:12px;
  line-height:1.5;
  color:var(--dim);
  letter-spacing:.08em;
  text-transform:uppercase;
}

.links-grid{
  display:grid;
  gap:6px;
}

.radio-stack{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.radio-card{
  background:var(--s2);
  border:1px solid var(--bd);
  border-radius:12px;
  padding:12px;
  transition:border-color .14s, background .14s, transform .14s;
}

a.radio-card{
  display:block;
  color:inherit;
  text-decoration:none;
}

a.radio-card:hover{
  border-color:var(--bd2);
  background:var(--s3);
}

.radio-card-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}

.radio-card-title{
  font-size:12px;
  font-weight:500;
  color:var(--wh);
}

.radio-card-title-with-icon{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.radio-card-title-with-icon .link-card-icon{
  width:20px;
  height:20px;
  min-width:20px;
  min-height:20px;
}

.radio-twitch-card{
  display:flex;
  flex-direction:column;
  color:inherit;
  text-decoration:none;
}

.radio-twitch-media{
  width:100%;
  aspect-ratio:16 / 9;
  position:relative;
  background:
    linear-gradient(180deg, #10131c 0%, #0a0d14 100%);
  border:1px solid var(--bd);
  border-radius:10px;
  overflow:hidden;
  transition:border-color .14s, background .14s, transform .14s;
}

.radio-twitch-card:hover .radio-twitch-media{
  border-color:var(--bd2);
  background:linear-gradient(180deg, #121724 0%, #0b0f18 100%);
}

.radio-twitch-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  pointer-events:none;
}

.radio-twitch-canvas{
  width:100%;
  height:100%;
  display:block;
}

.radio-twitch-corner-arrow{
  position:absolute;
  right:10px;
  bottom:10px;
  width:24px;
  height:24px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(16,20,33,.72);
  color:var(--tx2);
  display:grid;
  place-items:center;
  backdrop-filter:blur(6px);
}

.radio-twitch-corner-arrow svg{
  width:12px;
  height:12px;
  display:block;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.radio-about-card-link{
  display:grid;
  grid-template-columns:26px minmax(0, 1fr) 16px;
  gap:10px;
  align-items:center;
  color:inherit;
  text-decoration:none;
}

.radio-about-copy-wrap{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.radio-about-label{
  font-size:12px;
  font-weight:500;
  color:var(--wh);
}

.radio-about-copy{
  margin:0;
  font-size:12px;
  line-height:1.6;
  color:var(--tx2);
}

.link-card{
  display:grid;
  grid-template-columns:32px minmax(0, 1fr) 16px;
  gap:10px;
  align-items:center;
  padding:8px 10px;
  min-height:50px;
  border-radius:10px;
  border:1px solid var(--bd);
  background:var(--s2);
  color:inherit;
  text-decoration:none;
  transition:border-color .14s, background .14s, transform .14s;
}

.link-card:hover{
  border-color:var(--bd2);
  background:var(--s3);
}

.link-card-instagram{
  grid-template-columns:1fr;
  gap:6px;
  padding:10px;
  background:var(--s2);
}

.link-card-instagram:hover{
  background:var(--s3);
}

.link-card-instagram-head{
  display:grid;
  grid-template-columns:32px minmax(0, 1fr) 16px;
  gap:10px;
  align-items:center;
}

.link-card-instagram-copy{
  margin:0;
  padding-left:42px;
  font-size:12px;
  line-height:1.45;
  color:var(--dim);
}

.link-card-discord{
  grid-template-columns:1fr;
  gap:6px;
  padding:10px;
}

.link-card-discord-head{
  display:grid;
  grid-template-columns:32px minmax(0, 1fr) 16px;
  gap:10px;
  align-items:center;
}

.link-card-discord-copy{
  margin:0;
  padding-left:42px;
  font-size:12px;
  line-height:1.45;
  color:var(--dim);
}

.link-card-mail{
  grid-template-columns:1fr;
  gap:6px;
  padding:10px;
}

.link-card-mail-head{
  display:grid;
  grid-template-columns:32px minmax(0, 1fr) 16px;
  gap:10px;
  align-items:center;
}

.link-card-mail-copy{
  margin:0;
  padding-left:42px;
  font-size:12px;
  line-height:1.45;
  color:var(--dim);
}

.link-card-icon{
  width:24px;
  height:24px;
  min-width:24px;
  min-height:24px;
  border-radius:999px;
  background:var(--s3);
  border:1px solid var(--bd2);
  display:grid;
  place-items:center;
  overflow:visible;
  color:var(--wh);
  font-size:12px;
  line-height:1;
  font-family:'DM Mono',monospace;
}

.link-card-icon img{
  width:16px;
  height:16px;
  display:block;
  object-fit:contain;
  border-radius:0;
}

.link-card-icon-text{
  font-family:'DM Mono',monospace;
}

.link-card-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
}

.link-card-copy strong{
  font-size:12px;
  font-weight:500;
  color:var(--tx2);
}

.link-card-arrow{
  width:14px;
  height:14px;
  display:grid;
  place-items:center;
  color:var(--dim);
}

.link-card-arrow svg{
  width:12px;
  height:12px;
  display:block;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}

@media (max-width: 420px){
  .links-shell{
    padding:calc(12px + env(safe-area-inset-top, 0px)) 12px calc(12px + env(safe-area-inset-bottom, 0px));
  }

  .links-panel{
    width:100%;
    min-width:0;
    height:calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    max-height:none;
  }

  .links-head{
    gap:12px;
    padding:12px;
  }

  .links-tabs{
    flex:1;
  }

  .links-grid{
    gap:6px;
  }
}