/* ============================================
   IvySeal Profile - Clean Monochrome Design
   Exact Typography & Fonts from bignut.zip
   ============================================ */

/* ══════════════════════════════════════
   EXACT FONTS FROM BIGNUT.ZIP
   ══════════════════════════════════════ */

/* Google Sans (Vietnamese) */
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/GoogleSans-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* Google Sans (Latin Ext) */
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/GoogleSans-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Google Sans (Latin) */
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/GoogleSans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Climate Crisis (Latin Ext) */
@font-face {
  font-family: 'Climate Crisis';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('assets/fonts/ClimateCrisis-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Climate Crisis (Latin) */
@font-face {
  font-family: 'Climate Crisis';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('assets/fonts/ClimateCrisis-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Material Symbols Outlined (from bignut.zip) */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/MaterialSymbolsOutlined.woff2') format('woff2');
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'liga';
  user-select: none;
}

/* ── Design Tokens ── */
:root {
  /* Surfaces - Ultra Deep Black */
  --bg-page: #000000;
  --bg-card: #08080a;
  --bg-card-hover: #0d0d10;
  --bg-inner: #0f0f13;
  --bg-inner-hover: #16161b;

  /* Text */
  --text-primary: #ffffff;
  --text-secondary: #8c8c96;
  --text-muted: #52525c;

  /* Accent (Pure Monochrome) */
  --accent: #ffffff;
  --accent-dim: rgba(255, 255, 255, 0.08);
  --accent-border: rgba(255, 255, 255, 0.22);

  /* Borders */
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-card: rgba(255, 255, 255, 0.05);
  --border-card-hover: rgba(255, 255, 255, 0.12);

  /* Radius */
  --radius-card: 28px;
  --radius-inner: 12px;
  --radius-pill: 9999px;
  --radius-circle: 50%;

  /* Layout */
  --gap-grid: 18px;
  --padding-card: 24px;
  --max-width: 1040px;

  /* Transitions */
  --transition-fast: 0.18s ease;
  --transition-smooth: 0.25s ease;
}

/* ── Reset & Base ── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
  background-color: var(--bg-page);
  color: var(--text-primary);
  font-size: 16px;
  line-height: normal;
  min-height: 100vh;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

/* ── Text Selection (Highlight) ── */
::selection,
*::selection {
  background-color: #ffffff !important;
  color: #000000 !important;
}

::-moz-selection,
*::-moz-selection {
  background-color: #ffffff !important;
  color: #000000 !important;
}

/* ── Scrollbar ── */
html {
  scrollbar-width: thin;
  scrollbar-color: #ffffff #000000;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #000000;
}
::-webkit-scrollbar-thumb {
  background: #ffffff;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #d0d0d0;
}
::-webkit-scrollbar-corner {
  background: #000000;
}

/* ══════════════════════════════════════
   HERO SECTION
   ══════════════════════════════════════ */
.hero {
  position: relative;
  width: 100%;
  height: 300px;
  background: #000000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.85;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.08) 35%,
    rgba(0, 0, 0, 0.65) 70%,
    #000000 100%
  );
  z-index: 1;
  pointer-events: none;
}

.hero-avatar-wrapper {
  position: relative;
  z-index: 2;
  transform: translateY(50%);
}

.avatar-badge {
  position: relative;
  width: 302px;
  height: 302px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-img {
  width: 280px;
  height: 280px;
  border-radius: 50%;
  border: 6px solid var(--bg-page);
  background: var(--bg-inner);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.75);
  user-select: none;
  overflow: hidden;
  position: relative;
}

.avatar-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* ══════════════════════════════════════
   MAIN LAYOUT - 2-COLUMN FLOW
   ══════════════════════════════════════ */
.main-content {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 180px var(--gap-grid) 40px;
  display: flex;
  flex-direction: column;
  gap: var(--gap-grid);
}

.main-columns {
  display: flex;
  gap: var(--gap-grid);
  align-items: flex-start;
}

.col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--gap-grid);
  min-width: 0;
}

/* ══════════════════════════════════════
   CARD BASE
   ══════════════════════════════════════ */
.card {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-card);
  border-radius: var(--radius-card);
  padding: var(--padding-card);
  border: 1px solid var(--border-card);
  position: relative;
}

/* ── Card Header ── */
.card-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
}

.card-badge {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background-color: #ffffff;
  color: #0a0a0c;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.card-badge .material-symbols-outlined {
  font-size: 22px;
  width: 22px;
  height: 22px;
  color: #0a0a0c;
  fill: #0a0a0c;
}

.card-badge svg {
  width: 22px;
  height: 22px;
  fill: #0a0a0c;
}

/* Badge Shape Masks (exact from bignut.zip) */
.badge-bio {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='296' height='296' fill='none'%3E%3Cpath fill='currentColor' d='M21.001 148C7.895 132.339 0 112.126 0 90.06 0 40.32 40.113 0 89.595 0c22.395 0 42.871 8.26 58.578 21.913C163.843 8.26 184.271 0 206.614 0 255.981 0 296 40.321 296 90.06c0 22.066-7.877 42.279-20.952 57.94C288.123 163.661 296 183.874 296 205.94c0 49.739-40.019 90.06-89.386 90.06-22.343 0-42.771-8.259-58.441-21.913C132.466 287.741 111.99 296 89.595 296 40.113 296 0 255.679 0 205.94c0-22.066 7.895-42.279 21.001-57.94'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='296' height='296' fill='none'%3E%3Cpath fill='currentColor' d='M21.001 148C7.895 132.339 0 112.126 0 90.06 0 40.32 40.113 0 89.595 0c22.395 0 42.871 8.26 58.578 21.913C163.843 8.26 184.271 0 206.614 0 255.981 0 296 40.321 296 90.06c0 22.066-7.877 42.279-20.952 57.94C288.123 163.661 296 183.874 296 205.94c0 49.739-40.019 90.06-89.386 90.06-22.343 0-42.771-8.259-58.441-21.913C132.466 287.741 111.99 296 89.595 296 40.113 296 0 255.679 0 205.94c0-22.066 7.895-42.279 21.001-57.94'/%3E%3C/svg%3E");
}

.badge-socials {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='302' height='302' fill='none' viewBox='-5 0 302 302'%3E%3Cpath fill='currentColor' d='M89.416 25.75c17.564-12.76 26.346-19.138 35.708-22.31a65.06 65.06 0 0 1 41.752 0c9.361 3.172 18.143 9.551 35.709 22.31l39.498 28.69c10.431 7.577 15.646 11.365 19.898 15.913a65 65 0 0 1 13.842 22.836c2.065 5.873 3.011 12.248 4.902 25l7.313 49.312c3.317 22.369 4.976 33.554 3.302 43.635a65.03 65.03 0 0 1-20.75 37.771c-7.611 6.821-17.941 11.422-38.603 20.625l-46.811 20.85c-12.469 5.553-18.703 8.33-25.112 9.749a65.1 65.1 0 0 1-28.128 0c-6.409-1.419-12.643-4.196-25.112-9.749l-46.81-20.85c-20.662-9.203-30.993-13.804-38.604-20.625A65.03 65.03 0 0 1 .66 211.136c-1.674-10.081-.015-21.266 3.302-43.635l7.313-49.312c1.891-12.752 2.837-19.127 4.902-25a65 65 0 0 1 13.842-22.836c4.252-4.548 9.467-8.336 19.898-15.913z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='302' height='302' fill='none' viewBox='-5 0 302 302'%3E%3Cpath fill='currentColor' d='M89.416 25.75c17.564-12.76 26.346-19.138 35.708-22.31a65.06 65.06 0 0 1 41.752 0c9.361 3.172 18.143 9.551 35.709 22.31l39.498 28.69c10.431 7.577 15.646 11.365 19.898 15.913a65 65 0 0 1 13.842 22.836c2.065 5.873 3.011 12.248 4.902 25l7.313 49.312c3.317 22.369 4.976 33.554 3.302 43.635a65.03 65.03 0 0 1-20.75 37.771c-7.611 6.821-17.941 11.422-38.603 20.625l-46.811 20.85c-12.469 5.553-18.703 8.33-25.112 9.749a65.1 65.1 0 0 1-28.128 0c-6.409-1.419-12.643-4.196-25.112-9.749l-46.81-20.85c-20.662-9.203-30.993-13.804-38.604-20.625A65.03 65.03 0 0 1 .66 211.136c-1.674-10.081-.015-21.266 3.302-43.635l7.313-49.312c1.891-12.752 2.837-19.127 4.902-25a65 65 0 0 1 13.842-22.836c4.252-4.548 9.467-8.336 19.898-15.913z'/%3E%3C/svg%3E");
}

.badge-music {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='316' height='316' fill='none'%3E%3Cpath fill='currentColor' d='M84.116 39.785c53.046-53.047 139.052-53.047 192.099 0s53.047 139.053 0 192.099l-44.331 44.331c-53.046 53.047-139.052 53.047-192.099 0s-53.047-139.053 0-192.1z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='316' height='316' fill='none'%3E%3Cpath fill='currentColor' d='M84.116 39.785c53.046-53.047 139.052-53.047 192.099 0s53.047 139.053 0 192.099l-44.331 44.331c-53.046 53.047-139.052 53.047-192.099 0s-53.047-139.053 0-192.1z'/%3E%3C/svg%3E");
}

.badge-anime {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' fill='none' viewBox='0 -10 320 320'%3E%3Cpath fill='currentColor' d='M15.715 80.543c2.574-24.579 3.861-36.868 8.587-46.565C31.143 19.945 43.078 9.11 57.629 3.723 67.683 0 79.933 0 104.432 0h123.705c29.627 0 44.441 0 55.75 4.854 16.374 7.028 28.833 20.996 34.04 38.161 3.596 11.856 2.04 26.718-1.073 56.442l-12.569 120c-2.574 24.579-3.861 36.868-8.588 46.565-6.839 14.033-18.774 24.868-33.325 30.255C252.317 300 240.067 300 215.568 300H91.863c-29.627 0-44.44 0-55.75-4.854-16.373-7.028-28.833-20.995-34.04-38.161-3.597-11.856-2.04-26.718 1.073-56.442z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' fill='none' viewBox='0 -10 320 320'%3E%3Cpath fill='currentColor' d='M15.715 80.543c2.574-24.579 3.861-36.868 8.587-46.565C31.143 19.945 43.078 9.11 57.629 3.723 67.683 0 79.933 0 104.432 0h123.705c29.627 0 44.441 0 55.75 4.854 16.374 7.028 28.833 20.996 34.04 38.161 3.596 11.856 2.04 26.718-1.073 56.442l-12.569 120c-2.574 24.579-3.861 36.868-8.588 46.565-6.839 14.033-18.774 24.868-33.325 30.255C252.317 300 240.067 300 215.568 300H91.863c-29.627 0-44.44 0-55.75-4.854-16.373-7.028-28.833-20.995-34.04-38.161-3.597-11.856-2.04-26.718 1.073-56.442z'/%3E%3C/svg%3E");
}

.badge-gaming {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' fill='none'%3E%3Cpath fill='currentColor' d='M246.453 38.812c9.952.676 14.928 1.014 18.951 2.773a25.24 25.24 0 0 1 13.011 13.011c1.759 4.023 2.097 8.999 2.773 18.951l1.544 22.712c.273 4.025.41 6.037.847 7.96a25.3 25.3 0 0 0 3.248 7.84c1.05 1.669 2.376 3.189 5.029 6.229l14.968 17.15c6.56 7.516 9.839 11.274 11.439 15.362a25.23 25.23 0 0 1 0 18.4c-1.6 4.088-4.879 7.846-11.439 15.362l-14.968 17.15c-2.653 3.04-3.979 4.56-5.029 6.229a25.3 25.3 0 0 0-3.248 7.84c-.437 1.923-.574 3.935-.847 7.96l-1.544 22.712c-.676 9.952-1.014 14.928-2.773 18.951a25.24 25.24 0 0 1-13.011 13.011c-4.023 1.759-8.999 2.097-18.951 2.773l-22.712 1.544c-4.025.273-6.037.41-7.96.847a25.3 25.3 0 0 0-7.84 3.248c-1.669 1.05-3.189 2.376-6.229 5.029l-17.15 14.968c-7.516 6.56-11.274 9.839-15.362 11.439a25.23 25.23 0 0 1-18.4 0c-4.088-1.6-7.846-4.879-15.362-11.439l-17.15-14.968c-3.04-2.653-4.56-3.979-6.229-5.029a25.3 25.3 0 0 0-7.84-3.248c-1.923-.437-3.935-.574-7.96-.847l-22.712-1.544c-9.952-.676-14.928-1.014-18.95-2.773a25.24 25.24 0 0 1-13.012-13.011c-1.759-4.023-2.097-8.999-2.773-18.951l-1.544-22.712c-.273-4.025-.41-6.037-.847-7.96a25.2 25.2 0 0 0-3.248-7.84c-1.05-1.669-2.376-3.189-5.03-6.229l-14.967-17.15c-6.56-7.516-9.84-11.274-11.44-15.362a25.24 25.24 0 0 1 0-18.4c1.6-4.088 4.88-7.846 11.44-15.362l14.968-17.15c2.653-3.04 3.979-4.56 5.029-6.229a25.2 25.2 0 0 0 3.248-7.84c.437-1.923.574-3.935.847-7.96l1.544-22.712c.676-9.952 1.014-14.928 2.773-18.95a25.24 25.24 0 0 1 13.011-13.012c4.023-1.759 8.999-2.097 18.951-2.773l22.712-1.544c4.025-.273 6.037-.41 7.96-.847a25.2 25.2 0 0 0 7.84-3.248c1.669-1.05 3.189-2.376 6.229-5.03l17.15-14.967c7.516-6.56 11.274-9.84 15.362-11.44a25.24 25.24 0 0 1 18.4 0c4.088 1.6 7.846 4.88 15.362 11.44l17.15 14.968c3.04 2.653 4.56 3.979 6.229 5.029a25.2 25.2 0 0 0 7.84 3.248c1.923.437 3.935.574 7.96.847z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' fill='none'%3E%3Cpath fill='currentColor' d='M246.453 38.812c9.952.676 14.928 1.014 18.951 2.773a25.24 25.24 0 0 1 13.011 13.011c1.759 4.023 2.097 8.999 2.773 18.951l1.544 22.712c.273 4.025.41 6.037.847 7.96a25.3 25.3 0 0 0 3.248 7.84c1.05 1.669 2.376 3.189 5.029 6.229l14.968 17.15c6.56 7.516 9.839 11.274 11.439 15.362a25.23 25.23 0 0 1 0 18.4c-1.6 4.088-4.879 7.846-11.439 15.362l-14.968 17.15c-2.653 3.04-3.979 4.56-5.029 6.229a25.3 25.3 0 0 0-3.248 7.84c-.437 1.923-.574 3.935-.847 7.96l-1.544 22.712c-.676 9.952-1.014 14.928-2.773 18.951a25.24 25.24 0 0 1-13.011 13.011c-4.023 1.759-8.999 2.097-18.951 2.773l-22.712 1.544c-4.025.273-6.037.41-7.96.847a25.3 25.3 0 0 0-7.84 3.248c-1.669 1.05-3.189 2.376-6.229 5.029l-17.15 14.968c-7.516 6.56-11.274 9.839-15.362 11.439a25.23 25.23 0 0 1-18.4 0c-4.088-1.6-7.846-4.879-15.362-11.439l-17.15-14.968c-3.04-2.653-4.56-3.979-6.229-5.029a25.3 25.3 0 0 0-7.84-3.248c-1.923-.437-3.935-.574-7.96-.847l-22.712-1.544c-9.952-.676-14.928-1.014-18.95-2.773a25.24 25.24 0 0 1-13.012-13.011c-1.759-4.023-2.097-8.999-2.773-18.951l-1.544-22.712c-.273-4.025-.41-6.037-.847-7.96a25.2 25.2 0 0 0-3.248-7.84c-1.05-1.669-2.376-3.189-5.03-6.229l-14.967-17.15c-6.56-7.516-9.84-11.274-11.44-15.362a25.24 25.24 0 0 1 0-18.4c1.6-4.088 4.88-7.846 11.44-15.362l14.968-17.15c2.653-3.04 3.979-4.56 5.029-6.229a25.2 25.2 0 0 0 3.248-7.84c.437-1.923.574-3.935.847-7.96l1.544-22.712c.676-9.952 1.014-14.928 2.773-18.95a25.24 25.24 0 0 1 13.011-13.012c4.023-1.759 8.999-2.097 18.951-2.773l22.712-1.544c4.025-.273 6.037-.41 7.96-.847a25.2 25.2 0 0 0 7.84-3.248c1.669-1.05 3.189-2.376 6.229-5.03l17.15-14.967c7.516-6.56 11.274-9.84 15.362-11.44a25.24 25.24 0 0 1 18.4 0c4.088 1.6 7.846 4.88 15.362 11.44l17.15 14.968c3.04 2.653 4.56 3.979 6.229 5.029a25.2 25.2 0 0 0 7.84 3.248c1.923.437 3.935.574 7.96.847z'/%3E%3C/svg%3E");
}

.badge-projects {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='76' height='76'%3E%3Cpath fill='%23000' d='M29.475 4.061c4.463-5.267 12.587-5.267 17.05 0a11.17 11.17 0 0 0 9.445 3.912c6.881-.568 12.625 5.176 12.056 12.057a11.18 11.18 0 0 0 3.913 9.445c5.267 4.463 5.267 12.587 0 17.05a11.18 11.18 0 0 0-3.913 9.445c.569 6.881-5.175 12.625-12.056 12.056a11.18 11.18 0 0 0-9.445 3.913c-4.463 5.267-12.587 5.267-17.05 0a11.18 11.18 0 0 0-9.445-3.913c-6.881.569-12.625-5.175-12.057-12.056a11.17 11.17 0 0 0-3.912-9.445c-5.267-4.463-5.267-12.587 0-17.05a11.17 11.17 0 0 0 3.912-9.445C7.405 13.149 13.149 7.405 20.03 7.973a11.17 11.17 0 0 0 9.445-3.912'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='76' height='76'%3E%3Cpath fill='%23000' d='M29.475 4.061c4.463-5.267 12.587-5.267 17.05 0a11.17 11.17 0 0 0 9.445 3.912c6.881-.568 12.625 5.176 12.056 12.057a11.18 11.18 0 0 0 3.913 9.445c5.267 4.463 5.267 12.587 0 17.05a11.18 11.18 0 0 0-3.913 9.445c.569 6.881-5.175 12.625-12.056 12.056a11.18 11.18 0 0 0-9.445 3.913c-4.463 5.267-12.587 5.267-17.05 0a11.18 11.18 0 0 0-9.445-3.913c-6.881.569-12.625-5.175-12.057-12.056a11.17 11.17 0 0 0-3.912-9.445c-5.267-4.463-5.267-12.587 0-17.05a11.17 11.17 0 0 0 3.912-9.445C7.405 13.149 13.149 7.405 20.03 7.973a11.17 11.17 0 0 0 9.445-3.912'/%3E%3C/svg%3E");
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
  background-color: #ffffff;
  color: #0a0a0c;
}

.badge-projects .material-symbols-outlined,
.badge-projects svg {
  color: #0a0a0c;
  fill: #0a0a0c;
}

/* ── Projects List (What I've made) ── */
.project-links-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-radius: var(--radius-inner);
  overflow: hidden;
}

.project-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg-inner);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  text-decoration: none;
  color: var(--text-primary);
  position: relative;
  overflow: hidden;
  transition: background-color 150ms ease, border-color 150ms ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.project-links-list > .project-link:first-child {
  border-top-left-radius: var(--radius-inner);
  border-top-right-radius: var(--radius-inner);
}

.project-links-list > .project-link:last-child {
  border-bottom-left-radius: var(--radius-inner);
  border-bottom-right-radius: var(--radius-inner);
}

.project-links-list > .project-link:only-child {
  border-radius: var(--radius-inner);
}

.project-link::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: var(--text-primary);
  opacity: 0;
  pointer-events: none;
  transition: opacity 75ms linear;
  z-index: 1;
}

.project-link:hover::before {
  opacity: 0.08;
}

.project-link:active::before {
  opacity: 0.12;
}

.project-link-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  max-width: 40px;
  max-height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  background: #141419;
  position: relative;
  z-index: 2;
}

.project-link-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.project-link-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 2;
}

.project-link-name {
  font-family: 'Google Sans', -apple-system, sans-serif;
  font-weight: 500;
  font-size: 15px;
  color: var(--text-primary);
  line-height: 1.2;
}

.project-link-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-link-arrow {
  font-size: 20px;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  max-width: 20px;
  max-height: 20px;
  color: var(--text-muted);
  margin-left: auto;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  transition: transform 150ms ease, color 150ms ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.project-link:hover .project-link-arrow {
  color: var(--text-primary);
  transform: translateX(2px);
}

.card-title {
  font-family: 'Google Sans', sans-serif;
  font-size: 32px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  line-height: normal;
  color: var(--text-primary);
  margin: 0;
  display: block;
}

/* ── Bio Card ── */
.display-name {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
}

.display-prefix {
  font-family: 'Google Sans', sans-serif;
  font-size: 32px;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: normal;
  line-height: normal;
  display: inline;
}

.display-highlight {
  font-family: 'Climate Crisis', 'Google Sans', sans-serif;
  font-size: 32px;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: normal;
  line-height: normal;
  display: inline;
}

.bio-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

.bio-list li {
  font-family: 'Google Sans', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--text-secondary);
  padding-left: 18px;
  position: relative;
  line-height: 1.5;
}

.bio-list li::before {
  content: '•';
  position: absolute;
  left: 2px;
  color: var(--text-muted);
  font-size: 16px;
}

/* ══════════════════════════════════════
   SOCIAL LINKS
   ══════════════════════════════════════ */
.social-links-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.social-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: var(--bg-inner);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-inner);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* Material Design 3 State-Layer Overlay (Identical to bignut gm3-ripple hovered:before) */
.social-link::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: var(--text-primary);
  opacity: 0;
  pointer-events: none;
  transition: opacity 75ms linear, background-color 75ms linear;
  z-index: 1;
}

.social-link:hover::before {
  opacity: 0.08; /* Exact 8% on-surface highlight seen in bignut screenshot */
}

.social-link:active::before {
  opacity: 0.12; /* Exact 12% pressed state-layer */
}

.social-link-icon,
.social-link-info,
.social-link-arrow {
  position: relative;
  z-index: 2;
}

.social-link-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.social-link-icon svg {
  width: 20px;
  height: 20px;
  fill: var(--text-primary);
}

.social-link-info {
  flex: 1;
  min-width: 0;
}

.social-link-name {
  font-family: 'Google Sans', sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: var(--text-primary);
}

.social-link-platform {
  font-family: 'Google Sans', sans-serif;
  font-size: 12.8px;
  font-weight: 400;
  color: var(--text-muted);
  margin-top: 1px;
}

.social-link-arrow {
  color: var(--text-muted);
  fill: currentColor;
  font-size: 20px;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ══════════════════════════════════════
   EXACT BIGNUT.ZIP LAST.FM MUSIC WIDGET
   Directly from bignut.zip source bundle
   ══════════════════════════════════════ */
.yiKiWi {
  border-radius: var(--v0WLje, 16px);
  background-color: var(--yAsNia, #181820);
  width: 100%;
  height: 200px;
  color: var(--Afy16c, #e2e2ea);
  position: relative;
  overflow: hidden;
  transition: background-color 0.4s ease, color 0.4s ease;
}

.yiKiWi[inactive] {
  filter: grayscale();
  --x04wco: "Flow Circular", system-ui;
  font-family: var(--x04wco);
  pointer-events: none;
  opacity: .5;
}

.yiKiWi[inactive] span:not(.wS25jw),
.yiKiWi[inactive] a:not(:has(h2)),
.yiKiWi[inactive] h2 {
  padding: 0 5px;
}

.yiKiWi[inactive] a:hover {
  text-decoration: none;
}

.y5vP3e {
  background-color: var(--ztUPdM, #111116);
  border-radius: var(--v0WLje, 16px);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 200px;
  display: flex;
  overflow: hidden;
}

.vpqNXe {
  z-index: 1;
  box-sizing: border-box;
  flex-direction: column;
  max-width: 75%;
  height: 100%;
  padding: 16px;
  display: flex;
  position: relative;
}

.vpqNXe:before {
  content: "";
  z-index: -1;
  background: linear-gradient(to right, var(--yAsNia, #181820) 0%, var(--yAsNia, #181820) 5%, transparent 100%);
  width: 130%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: background 0.4s ease;
  pointer-events: none;
}

.vIVo4K {
  color: inherit;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  width: fit-content;
  font-size: .9rem;
  text-decoration: none;
  display: flex;
}

.vIVo4K:hover {
  text-decoration: underline;
}

.vIVo4K > span {
  font-family: var(--x04wco, var(--wYteDe, 'Google Sans', sans-serif));
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  word-break: break-word;
  overflow-wrap: break-word;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  font-weight: 400;
  display: -webkit-box;
  overflow: hidden;
}

.vIVo4K > img, .wS25jw {
  pointer-events: none;
  user-select: none;
  background-color: var(--yAsNia, #181820);
  border-radius: var(--yJSXnk, 9999px);
  width: 1.25em;
  height: 1.25em;
  object-fit: cover;
  image-rendering: high-quality;
}

.wS25jw {
  background-color: var(--zcCo3Q, #888);
}

.xGGyKO {
  box-sizing: border-box;
  z-index: 2;
  height: 18px;
  color: var(--xEzX8W, #e2e2ea);
  align-items: center;
  padding-left: 3px;
  display: flex;
  position: absolute;
  bottom: 16px;
  right: 16px;
  opacity: .8;
  transition: opacity .2s ease;
}

.xGGyKO:hover {
  opacity: 1;
}

.xGGyKO svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.wdlZjW {
  box-sizing: border-box;
  flex-direction: column;
  gap: 5px;
  margin-top: auto;
  padding-top: 1em;
  display: flex;
}

.wdlZjW > a {
  color: inherit;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  word-break: break-word;
  overflow-wrap: break-word;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  width: fit-content;
  font-size: .9rem;
  text-decoration: none;
  display: -webkit-box;
  overflow: hidden;
}

.wdlZjW > a:hover {
  text-decoration: underline;
}

.wdlZjW > a > h2 {
  font-family: var(--x04wco, var(--wYteDe, 'Google Sans', sans-serif));
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  word-break: break-word;
  overflow-wrap: break-word;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  margin: 0;
  font-size: 1.8rem;
  line-height: 2.3rem;
  font-weight: 500;
  display: -webkit-box;
  overflow: hidden;
}

.yMZqRO {
  z-index: 0;
  opacity: .5;
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.yMZqRO > md-icon {
  --xXkeNo: 256px;
  position: absolute;
  bottom: -42px;
  right: -32px;
}

.yMZqRO > img {
  pointer-events: none;
  user-select: none;
  color: #0000;
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.vkWpnC {
  flex-shrink: 0;
  justify-content: space-between;
  width: 13px;
  height: 13px;
  display: flex;
  position: relative;
}

.vkWpnC > span:nth-of-type(2) {
  animation-delay: -2.2s;
}

.vkWpnC > span:nth-of-type(3) {
  animation-delay: -3.7s;
}

.vkWpnC > span {
  transform-origin: bottom;
  content: "";
  background-color: currentColor;
  border-radius: 4px;
  width: 3px;
  height: 100%;
  animation: 2.2s infinite alternate nowplaying--bounce;
}

@keyframes nowplaying--bounce {
  10% { transform: scaleY(.3); }
  30% { transform: scaleY(1); }
  60% { transform: scaleY(.5); }
  80% { transform: scaleY(.75); }
  to { transform: scaleY(.6); }
}

/* ══════════════════════════════════════
   POSTER GRID (Anime & Gaming)
   ══════════════════════════════════════ */
.poster-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

/* Gaming card specific poster layout (identical to bignut .vZWS3K) */
#card-gaming .poster-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

#card-gaming .poster-card {
  width: 100%;
}

.poster-card {
  display: flex;
  flex-direction: column;
  aspect-ratio: 2 / 3;
  border-radius: 8px;
  position: relative;
  cursor: pointer;
  background: var(--bg-inner);
  text-decoration: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.poster-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 8px;
  aspect-ratio: 2 / 3;
}

/* 1px subtle outline border (Identical to bignut .yHYCmO:after) */
.poster-card::after {
  content: "";
  pointer-events: none;
  box-sizing: border-box;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}

/* Material Design 3 State-Layer Overlay (Identical to bignut gm3-ripple hovered:before) */
.poster-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background-color: var(--text-primary);
  opacity: 0;
  pointer-events: none;
  transition: opacity 75ms linear, background-color 75ms linear;
  z-index: 2;
}

.poster-card:hover::before {
  opacity: 0.08; /* Exact 8% Material 3 hover sheen */
}

.poster-card:active::before {
  opacity: 0.12; /* Exact 12% pressed state */
}

/* Material 3 Tooltip (Identical to bignut gm3-tooltip: scale .8 -> 1, .15s cubic-bezier) */
.poster-tooltip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) scale(0.8);
  transform-origin: bottom center;
  background: #202124;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  padding: 4px 8px;
  font-family: 'Google Sans', 'Roboto', sans-serif;
  font-size: 11px;
  font-weight: 500;
  line-height: 1rem;
  letter-spacing: 0.01em;
  color: #ffffff;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity 0.15s cubic-bezier(0, 0, 0.2, 1), transform 0.15s cubic-bezier(0, 0, 0.2, 1);
  z-index: 100;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
}

.poster-card:hover .poster-tooltip {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* ══════════════════════════════════════
   ACTION BUTTONS (Pill Buttons)
   ══════════════════════════════════════ */
.card-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

.pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 18px;
  border-radius: var(--radius-pill);
  background: #ffffff;
  color: #0a0a0c;
  font-family: 'Google Sans', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  border: 1px solid #ffffff;
  cursor: pointer;
  transition: 
    background var(--transition-fast),
    border-color var(--transition-fast);
  text-decoration: none;
}

.pill-btn:hover {
  background: #dedee2;
  border-color: #dedee2;
}

.pill-btn svg {
  width: 15px;
  height: 15px;
  fill: #0a0a0c;
}

.pill-btn-ghost {
  background: var(--bg-inner);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
}

.pill-btn-ghost:hover {
  background: var(--bg-inner-hover);
  border-color: var(--accent-border);
  color: #ffffff;
}

.pill-btn-ghost svg {
  fill: var(--text-primary);
}

/* ══════════════════════════════════════
   FOOTER
   ══════════════════════════════════════ */
.footer-card {
  background: var(--bg-card);
  border-radius: var(--radius-card);
  padding: 24px 28px;
  border: 1px solid var(--border-card);
}

.footer-top {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 18px;
}

.footer-icon-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-circle);
  background: var(--bg-inner);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 
    background var(--transition-fast),
    border-color var(--transition-fast);
}

.footer-icon-btn:hover {
  background: var(--bg-inner-hover);
  border-color: var(--accent-border);
}

.footer-icon-btn svg {
  width: 18px;
  height: 18px;
  fill: var(--text-secondary);
  transition: fill var(--transition-fast);
}

.footer-icon-btn:hover svg {
  fill: var(--text-primary);
}

.footer-divider {
  width: 100%;
  height: 1px;
  background: var(--border-subtle);
  margin-bottom: 18px;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-brand {
  box-sizing: border-box;
  width: fit-content;
  color: var(--text-primary);
  user-select: none;
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
}

.footer-brand > span {
  font-family: 'Google Sans', sans-serif;
  font-size: 24px;
  font-weight: 450;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
}

.footer-brand-name {
  font-family: 'Climate Crisis', sans-serif;
  font-size: 24px;
  font-weight: 450;
  line-height: 1;
  color: var(--text-primary);
  display: inline;
}

.footer-brand-tld {
  font-family: 'Google Sans', sans-serif;
  font-size: 24px;
  font-weight: 450;
  line-height: 1;
  color: var(--text-primary);
  display: inline;
}

/* ══════════════════════════════════════
   RESPONSIVE DESIGN
   ══════════════════════════════════════ */
@media (max-width: 1024px) {
  :root {
    --max-width: min(1040px, calc(100vw - 20px));
    --padding-card: 24px;
    --gap-grid: 20px;
  }

  .main-content {
    max-width: var(--max-width);
    padding: 165px 0 40px;
    margin: 0 auto;
  }

  .main-columns {
    flex-direction: column;
    width: 100%;
    gap: var(--gap-grid);
    align-items: stretch;
  }

  /* Single-column flex interleaved via display: contents (exact bignut.zip .wg4quu) */
  .col {
    display: contents;
  }

  .col-left > #card-bio,
  .col-left > #card-about {
    order: 1;
    width: 100%;
  }

  .col-right > #card-projects {
    order: 2;
    width: 100%;
  }

  .col-right > #card-music,
  .col-right > #card-listening {
    order: 3;
    width: 100%;
  }

  .col-left > #card-socials {
    order: 4;
    width: 100%;
  }

  .col-right > #card-gaming {
    order: 5;
    width: 100%;
  }

  .col-left > #card-anime {
    order: 6;
    width: 100%;
  }

  /* 3-Column Poster Grids (exact bignut.zip .vZWS3K) */
  .poster-grid,
  #card-gaming .poster-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }

  #card-gaming .poster-card {
    width: 100%;
    max-width: none;
  }

  .hero {
    height: 300px;
  }

  .avatar-badge {
    width: 270px;
    height: 270px;
  }

  .avatar-img {
    width: 254px;
    height: 254px;
    border-width: 6px;
  }

  .footer-card {
    border-radius: 28px 28px 0 0;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 28px 24px calc(1.5em + env(safe-area-inset-bottom, 16px));
  }
}

@media (max-width: 600px) {
  :root {
    --padding-card: 20px;
    --gap-grid: 16px;
  }

  .main-content {
    padding: 135px 0 32px;
  }

  .card {
    border-radius: 24px;
    padding: var(--padding-card);
  }

  .card-title {
    font-size: 24px;
  }

  .display-prefix {
    font-size: 24px;
  }

  .display-highlight {
    font-size: 24px;
  }

  .card-badge {
    width: 40px;
    height: 40px;
  }

  .card-badge .material-symbols-outlined {
    font-size: 22px;
  }

  /* 3-column posters with 10px gap on smartphone screens */
  .poster-grid,
  #card-gaming .poster-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  .hero {
    height: 235px;
  }

  .avatar-badge {
    width: min(230px, 65vw);
    height: min(230px, 65vw);
  }

  .avatar-img {
    width: min(216px, 60vw);
    height: min(216px, 60vw);
    border-width: 5px;
  }

  .social-link {
    padding: 12px 14px;
    gap: 12px;
  }

  .social-link-name {
    font-size: 15px;
  }

  .footer-card {
    padding: 24px 16px calc(1.5em + env(safe-area-inset-bottom, 12px));
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* Material Design 3 Click Ripple Effect */
.m3-ripple-wave {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--text-primary) max(100% - 70px, 65%), transparent 100%);
  opacity: 0.14;
  pointer-events: none;
  transform: scale(0);
  animation: m3RippleGrow 0.35s cubic-bezier(0, 0, 0.2, 1) forwards;
  z-index: 1;
}

@keyframes m3RippleGrow {
  to {
    transform: scale(1);
    opacity: 0.08;
  }
}

/* ══════════════════════════════════════
   DISCORD ACCORDION INLINE COLLAPSE
   ══════════════════════════════════════ */
button.social-link-btn {
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: left;
  line-height: inherit;
  box-sizing: border-box;
  cursor: pointer;
  user-select: none;
}

button.social-link-btn > * {
  pointer-events: none;
}

.discord-dropdown-wrapper {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
}

button.footer-icon-btn {
  padding: 0;
  outline: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

button.footer-icon-btn > * {
  pointer-events: none;
}

.discord-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease;
}

.discord-dropdown-wrapper.active .discord-arrow {
  transform: rotate(180deg);
  color: var(--text-primary);
}

.discord-accordion-collapse {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.discord-dropdown-wrapper.active .discord-accordion-collapse {
  grid-template-rows: 1fr;
}

.discord-accordion-inner {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 8px;
  transition: padding-top 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.discord-dropdown-wrapper.active .discord-accordion-inner {
  padding-top: 8px;
}

.discord-sub-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  background: var(--bg-inner);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-inner);
  text-decoration: none;
  color: var(--text-primary);
  opacity: 0;
  transform: translateY(-12px);
  transition: 
    background var(--transition-fast), 
    border-color var(--transition-fast), 
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.3s ease;
}

.discord-dropdown-wrapper.active .discord-sub-item:nth-child(1) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.06s;
}

.discord-dropdown-wrapper.active .discord-sub-item:nth-child(2) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.12s;
}

.discord-sub-item:hover {
  background: var(--bg-inner-hover);
  border-color: rgba(255, 255, 255, 0.15);
}

.discord-sub-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  flex-shrink: 0;
}

.discord-sub-icon svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.discord-sub-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.discord-sub-name {
  font-family: 'Google Sans', sans-serif;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text-primary);
}

.discord-sub-id {
  font-family: 'Google Sans', sans-serif;
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 1px;
}

.discord-sub-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: color 0.15s ease;
}

.discord-sub-item:hover .discord-sub-arrow {
  color: var(--text-primary);
}