@font-face {
  font-family: "Adobe Caslon Pro";
  src: local("Adobe Caslon Pro"), local("ACaslonPro-Regular"), local("Caslon Pro");
  font-weight: 400 700;
  font-display: swap;
}

:root{
  --bg0:#060608;
  --bg1:#0b0b10;
  --fg:#e9e9f1;
  --muted:rgba(233,233,241,.72);
  --muted2:rgba(233,233,241,.50);
  --stroke:rgba(255,255,255,.10);
  --stroke2:rgba(255,255,255,.06);
  --glass:rgba(12,12,18,.55);
  --shadow:0 18px 60px rgba(0,0,0,.55);
  --mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --serif:"Adobe Caslon Pro", "Caslon", Georgia, "Times New Roman", serif;
  --r:16px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--fg);
  font-family:var(--sans);
  background:var(--bg0);
  overflow-x:hidden;
}

/* Video de fondo - sin audio (muted en HTML + JS) */
.bg-video{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
  pointer-events:none;
}

.bg{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:1;
  background:
    radial-gradient(1200px 800px at 50% 0%, rgba(0,0,0,.5), transparent 55%),
    radial-gradient(900px 600px at 80% 70%, rgba(0,0,0,.35), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.4), rgba(0,0,0,.55));
  opacity:.92;
}
.bg::after{
  content:"";
  position:absolute;
  inset:-20%;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0px, rgba(255,255,255,.02) 1px, transparent 2px, transparent 8px);
  opacity:.06;
  transform:rotate(-7deg);
  mix-blend-mode:overlay;
}

.wrap{
  width:min(1280px, calc(100% - 24px));
  margin:0 auto 24px;
  position:relative;
  z-index:2;
}

.hero{
  width:min(960px, calc(100% - 24px));
  margin:20px auto 20px;
  position:relative;
  z-index:2;
}
.hero__top{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:28px;
  flex-wrap:wrap;
  text-align:center;
}
.hero__top .hero__brand{
  text-align:center;
}
.hero__avatar-wrap{
  flex-shrink:0;
  position:relative;
}
.hero__avatar-wrap::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:50%;
  background:transparent;
  box-shadow:
    0 0 28px rgba(255,255,255,.2),
    0 0 56px rgba(255,255,255,.1),
    inset 0 0 20px rgba(255,255,255,.04);
  pointer-events:none;
}
.hero__avatar{
  width:clamp(120px, 22vw, 200px);
  height:clamp(120px, 22vw, 200px);
  border-radius:50%;
  object-fit:cover;
  border:2px solid rgba(255,255,255,.15);
  box-shadow:0 0 24px rgba(0,0,0,.35), 0 0 48px rgba(255,255,255,.06);
  display:block;
}
.hero__brand{
  flex:0 1 auto;
  min-width:0;
  max-width:420px;
}
.hero__about{
  margin:6px auto 0;
  font-size:13px;
  line-height:1.45;
  color:var(--muted);
  max-width:420px;
}
.hero__meta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
}
.hero__name{
  font-family:var(--serif);
  font-size:clamp(56px, 14vw, 130px);
  line-height:1;
  letter-spacing:.02em;
  font-weight:400;
  color:#fff;
  text-shadow:
    0 1px 2px rgba(0,0,0,.3),
    0 0 20px rgba(255,255,255,.35),
    0 0 40px rgba(255,255,255,.2),
    0 0 60px rgba(220,210,255,.25);
}
.hero__tagline{
  margin-top:14px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(255,255,255,.78);
  padding:6px 10px;
  border-radius:6px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}
.pill__icon{
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,.7);
  flex-shrink:0;
}

.grid{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:14px;
}

/* Igual que SellAuth: 3 keyframes + ease-in-out para movimiento fluido */
@keyframes panelFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.card{
  grid-column:span 4;
  --accent: 255,255,255;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.38));
  box-shadow:
    0 8px 24px rgba(0,0,0,.3),
    0 0 0 1px rgba(255,255,255,.04) inset;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  padding:14px 16px;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  animation: panelFloat 9s ease-in-out infinite;
  will-change:transform;
  min-height:260px;
}
.card:nth-child(1){ animation-delay: 0s; }
.card:nth-child(2){ animation-delay: .6s; }
.card:nth-child(3){ animation-delay: 1.2s; }
.card:nth-child(4){ animation-delay: .3s; }

@media (min-width: 1100px){
  .grid{ grid-auto-flow:dense; }
  /* Layout asimétrico para que no sean 4 iguales */
  .grid .card:nth-child(1){ grid-column:span 5; }
  .grid .card:nth-child(2){ grid-column:span 7; }
  .grid .card:nth-child(3){ grid-column:span 7; }
  .grid .card:nth-child(4){ grid-column:span 5; }
  .grid .card:nth-child(5){ grid-column:span 12; }
}
.card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:14px;
  background:
    radial-gradient(900px 340px at 30% -10%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(700px 320px at 110% 20%, rgba(255,255,255,.05), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 45%);
  opacity:.85;
  pointer-events:none;
}
.card::after{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  top:12px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(var(--accent), 0), rgba(var(--accent), .4), rgba(var(--accent), 0));
  opacity:.2;
  pointer-events:none;
  transition:opacity .25s ease;
}
.card:hover::after{
  opacity:.35;
}
.card > *{position:relative}

.card__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.card__title{
  font-family:var(--sans);
  font-weight:600;
  letter-spacing:.03em;
  text-transform:none;
  font-size:12px;
  display:flex;
  align-items:center;
  gap:6px;
  color:rgba(255,255,255,.9);
}
.card__prefix{
  color:rgba(255,255,255,.5);
  font-weight:600;
}
.card__sub{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(255,255,255,.35);
}

/* Extras card (filler, no info) */
.card--extras{ grid-column:span 12; padding:10px 14px; min-height:auto; }
.extras{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.extras__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.theme-toggle{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.theme-btn{
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);
  color:rgba(255,255,255,.7);
  border-radius:6px;
  padding:6px 10px;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.theme-btn:hover{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.12);
  color:rgba(255,255,255,.88);
}
.theme-btn[aria-pressed="true"]{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.14);
  color:rgba(255,255,255,.9);
}
.extras__sparkline{
  height:6px;
  flex:1;
  min-width:160px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
}
.extras__dots{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:4px 0;
}
.extras__dot{
  width:4px;
  height:4px;
  border-radius:50%;
  background:rgba(255,255,255,.2);
}
.extras__tag{
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.28);
}

/* Theme variants (optional) */
body[data-theme="glow"] .card{ box-shadow:0 4px 24px rgba(0,0,0,.2), 0 0 0 1px rgba(140,110,255,.12); }
body[data-theme="mono"] .bg::after{ opacity:.04; }
body[data-theme="mono"] .card::before{ opacity:.5; }
.card__intro{
  margin:0 0 10px;
  font-size:13px;
  line-height:1.45;
  color:var(--muted);
}
.card__intro--small{
  margin-top:2px;
  margin-bottom:6px;
  font-size:12px;
}

.card__divider{
  height:1px;
  background:rgba(255,255,255,.06);
  margin:10px 0;
}

.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips--tight{gap:6px}

.chip{
  font-family:var(--mono);
  font-size:11px;
  color:rgba(255,255,255,.82);
  padding:5px 9px;
  border-radius:6px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.03);
  transition:border-color .2s ease, background .2s ease, color .2s ease;
}
.chip:hover{
  border-color:rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.95);
}
.chip--soft{
  border-color:rgba(255,255,255,.06);
  background:rgba(255,255,255,.03);
  color:rgba(255,255,255,.75);
}
.chip--soft:hover{
  border-color:rgba(255,255,255,.1);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.9);
}

.divider{
  height:1px;
  background:rgba(255,255,255,.06);
  margin:10px 0;
}

.mini{
  display:grid;
  grid-template-columns:78px 1fr;
  gap:12px;
  align-items:start;
}
.mini__k{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--muted2);
  padding-top:6px;
}
.mini__v{display:flex;flex-wrap:wrap;gap:10px}

.crypto{
  margin-top:18px;
}
.crypto__label{
  font-family:var(--mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.88);
  margin-bottom:10px;
}
.crypto__label-symbol{
  margin-right:4px;
  color:rgba(255,255,255,.95);
}
.crypto__list{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.crypto__row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:background .2s ease;
}
.crypto__row:last-child{ border-bottom:none; }
.crypto__row:hover{
  background:rgba(255,255,255,.03);
}
.crypto__icon{
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,.9);
  flex-shrink:0;
  filter:drop-shadow(0 0 8px rgba(255,255,255,.35)) drop-shadow(0 0 16px rgba(255,255,255,.15));
}
.crypto__icon--char{
  font-size:18px;
  font-weight:700;
  line-height:1;
}
.crypto__main{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.crypto__name{
  font-family:var(--mono);
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  color:rgba(255,255,255,.92);
  filter:drop-shadow(0 0 6px rgba(255,255,255,.3));
}
.crypto__copy{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  padding:0;
  border:none;
  border-radius:8px;
  background:transparent;
  color:rgba(255,255,255,.75);
  cursor:pointer;
  transition:color .2s ease, background .2s ease;
}
.crypto__copy:hover{
  color:rgba(255,255,255,.95);
  background:rgba(255,255,255,.06);
}
.crypto__copy:focus-visible{
  outline:2px solid rgba(255,255,255,.2);
  outline-offset:2px;
}
.crypto__copy-icon{
  flex-shrink:0;
  filter:drop-shadow(0 0 6px rgba(255,255,255,.3));
}
.crypto__copy:hover .crypto__copy-icon{
  filter:drop-shadow(0 0 10px rgba(255,255,255,.45));
}
.crypto__copy-done{
  display:none;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.crypto__copy.is-copied .crypto__copy-icon{ display:none; }
.crypto__copy.is-copied .crypto__copy-done{ display:inline; }

.project-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.project{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.05);
  background:rgba(255,255,255,.02);
  text-decoration:none;
  color:inherit;
  transition:border-color .2s ease, background .2s ease;
}
.project:hover{
  border-color:rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);
}
.project__name{
  font-weight:700;
  font-size:14px;
  letter-spacing:.01em;
}
.project__desc{
  margin-top:2px;
  color:var(--muted);
  font-size:12px;
}
.project__left .chips{margin-top:6px}

.badge{
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:4px 7px;
  border-radius:4px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  color:rgba(255,255,255,.6);
  white-space:nowrap;
}
.badge--dim{
  border-color:rgba(255,255,255,.10);
  color:rgba(255,255,255,.62);
}

.findme{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px 10px;
  margin-bottom:10px;
}
.findme__item{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:7px 10px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.03);
  color:inherit;
  text-decoration:none;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.05em;
  transition:border-color .2s ease, background .2s ease;
  min-width:0;
}
.findme__item:hover{
  border-color:rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
}
.findme__icon{
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,.78);
}
.findme__item:hover .findme__icon{ color:rgba(255,255,255,.92); }
.findme__item[href*="steam"] .findme__icon,
.findme__item[href*="github"] .findme__icon{ color:rgba(255,255,255,.78); }
.findme__item[href*="steam"]:hover .findme__icon,
.findme__item[href*="github"]:hover .findme__icon{ color:rgba(255,255,255,.92); }
.findme__label{
  color:rgba(255,255,255,.85);
  font-size:11px;
}

.links{display:flex;flex-direction:column;gap:8px}
.link{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:9px 12px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.05);
  background:rgba(255,255,255,.02);
  text-decoration:none;
  color:inherit;
  transition:border-color .2s ease, background .2s ease;
}
.link:hover{
  border-color:rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);
}
.link--with-icon{
  justify-content:flex-start;
  gap:12px;
}
.link--with-icon .link__cell{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex:1;
  min-width:0;
}
.link--with-icon .link__cell .link__k,
.link--with-icon .link__cell .link__v{ display:inline }
.link__icon{
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,.7);
  flex-shrink:0;
}
.link--with-icon:hover .link__icon{ color:rgba(255,255,255,.88); }
.link__k{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.88)}
.link__v{font-size:12px;color:rgba(255,255,255,.5)}

.about-me{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.about-me__item{
  border-radius:8px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.02);
  overflow:hidden;
  transition:border-color .2s ease, background .2s ease;
}
.about-me__item:hover{
  border-color:rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);
}
.about-me__btn{
  width:100%;
  padding:9px 12px;
  border:none;
  border-radius:8px;
  background:transparent;
  color:rgba(255,255,255,.88);
  font-family:var(--sans);
  font-size:12px;
  font-weight:500;
  text-align:left;
  cursor:pointer;
  transition:color .2s ease;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.about-me__btn::after{
  content:"+";
  font-size:14px;
  font-weight:400;
  opacity:.5;
  flex-shrink:0;
  transition:transform .2s ease;
}
.about-me__item.is-open .about-me__btn::after{
  transform:rotate(45deg);
}
.about-me__btn:hover{
  color:rgba(255,255,255,.98);
}
.about-me__answer{
  max-height:0;
  overflow:hidden;
  transition:max-height .3s ease;
}
.about-me__answer p{
  margin:0;
  padding:0 14px 12px 14px;
  padding-top:0;
  font-size:13px;
  line-height:1.55;
  color:rgba(255,255,255,.82);
}
.about-me__item.is-open .about-me__answer{
  max-height:400px;
}

.note{
  margin-top:12px;
  font-size:13px;
  color:var(--muted2);
  line-height:1.4;
}

/* Boot overlay */
.boot{
  position:fixed;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:20px;
  z-index:50;
  background:
    radial-gradient(ellipse 80% 50% at 50% 20%, rgba(60,40,80,.12) 0%, transparent 50%),
    radial-gradient(ellipse 120% 80% at 50% 100%, rgba(0,0,0,.4) 0%, transparent 50%),
    rgba(0,0,0,.65);
  backdrop-filter:blur(18px);
  transition:opacity .26s ease, visibility .26s ease;
}
.boot__hero{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:0 24px;
  max-width:min(420px, 92vw);
}
.boot__line{
  display:block;
  width:48px;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
}
.boot__line--bottom{
  margin-top:4px;
}
.boot__title{
  font-family:var(--serif);
  font-size:clamp(48px, 11vw, 88px);
  font-weight:400;
  letter-spacing:.08em;
  color:rgba(255,255,255,.98);
  text-shadow:0 2px 20px rgba(0,0,0,.3);
  margin:0;
  padding:0;
  position:relative;
  z-index:1;
  text-align:center;
  line-height:1.1;
}
.boot__tagline{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(255,255,255,.5);
  margin:0;
  padding:0;
}
.boot__center{
  width:min(400px, calc(100% - 40px));
  max-width:90vw;
  text-align:center;
  padding:24px 28px 20px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 100%);
  box-shadow:0 24px 64px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04) inset;
  margin:0 auto;
  flex-shrink:0;
  animation:panelFloat 9s ease-in-out infinite;
  will-change:transform;
}
.boot__cta{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.9);
  padding:14px 18px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.2);
  cursor:pointer;
  transition:transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
  width:100%;
}
.boot__cta:hover{
  transform:translateY(-2px);
  background:rgba(0,0,0,.28);
  border-color:rgba(255,255,255,.25);
  box-shadow:0 8px 24px rgba(0,0,0,.3);
}
.boot__cta:focus-visible{
  outline:2px solid rgba(255,255,255,.25);
  outline-offset:4px;
}
.boot__load{
  width:100%;
  height:4px;
  margin-top:14px;
  border-radius:999px;
  background:rgba(255,255,255,.1);
  overflow:hidden;
}
.boot__load-bar{
  height:100%;
  width:0%;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(255,255,255,.25), rgba(255,255,255,.5));
  transition:width .2s ease;
}
.boot__cta:disabled{
  cursor:not-allowed;
  opacity:.75;
}
.boot__cta:disabled:hover{
  transform:none;
  background:rgba(0,0,0,.2);
  border-color:rgba(255,255,255,.18);
  box-shadow:none;
}
.boot__hint{
  margin:14px 0 0;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
.boot__divider{
  height:1px;
  margin:14px 20px 0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
}
.boot__preview{
  margin:14px 0 0;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.5);
}

body.is-initialized .boot{
  opacity:0;
  visibility:hidden;
}
body.is-locked{
  height:100%;
  overflow:hidden;
}

/* Floating music player - compact bar */
.player{
  position:fixed;
  bottom:20px;
  left:20px;
  z-index:10;
  display:none;
  padding:6px 8px 6px 10px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(20,20,24,.85);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:0 4px 20px rgba(0,0,0,.35);
}
body.is-initialized .player{
  display:flex;
  flex-direction:column;
  gap:6px;
  max-width:320px;
}
.player__expand{
  margin-left:4px;
  padding:4px 6px;
  border:none;
  background:transparent;
  color:rgba(255,255,255,.7);
  font-size:10px;
  cursor:pointer;
  border-radius:6px;
  transition:color .15s ease, background .15s ease;
}
.player__expand:hover{
  color:#fff;
  background:rgba(255,255,255,.1);
}
.player__expand-chevron{
  display:inline-block;
  transition:transform .2s ease;
}
.player__now[hidden]{
  display:none !important;
}
.player__now{
  padding:8px 10px 6px;
  border-radius:10px;
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.06);
}
.player__now-label{
  display:block;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:rgba(255,255,255,.5);
  margin-bottom:4px;
}
.player__now-title{
  display:block;
  font-size:13px;
  font-weight:600;
  color:rgba(255,255,255,.95);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.player__now-artist{
  display:block;
  font-size:11px;
  color:rgba(255,255,255,.55);
  margin-top:2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.player__row{
  display:flex;
  align-items:center;
  gap:4px;
}
.player__btn{
  width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:none;
  border-radius:50%;
  background:transparent;
  color:rgba(255,255,255,.88);
  font-size:13px;
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.player__btn:hover{
  background:rgba(255,255,255,.1);
  color:#fff;
}
.player__btn:focus-visible{
  outline:2px solid rgba(255,255,255,.35);
  outline-offset:2px;
}
.player__btn--play{
  font-size:11px;
  padding-left:2px;
}
.player__vol-wrap{
  position:relative;
  margin-left:2px;
}
.player__btn--vol{
  padding:0;
  position:relative;
}
.player__vol-icon{
  display:block;
  color:inherit;
  pointer-events:none;
}
.player__vol-icon--muted{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  opacity:0;
}
.player__vol-icon--on{
  opacity:1;
}
.player__btn--vol.is-muted .player__vol-icon--on{
  opacity:0;
}
.player__btn--vol.is-muted .player__vol-icon--muted{
  opacity:1;
}
.player__panel-trigger{
  margin-left:4px;
  width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:none;
  border-radius:50%;
  background:transparent;
  color:rgba(255,255,255,.7);
  font-size:14px;
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.player__panel-trigger:hover{
  background:rgba(255,255,255,.1);
  color:#fff;
}
.player__vol-pop{
  position:absolute;
  bottom:100%;
  left:50%;
  transform:translateX(-50%);
  margin-bottom:8px;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 18px 48px rgba(0,0,0,.45);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .2s ease, visibility .2s ease;
}
.player__vol-pop.is-visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.player__vol-range{
  display:block;
  width:80px;
  height:6px;
  -webkit-appearance:none;
  appearance:none;
  background:rgba(255,255,255,.2);
  border-radius:3px;
  outline:none;
}
.player__vol-range::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#fff;
  cursor:pointer;
  box-shadow:0 0 6px rgba(0,0,0,.3);
}
.player__vol-range::-moz-range-thumb{
  width:14px;
  height:14px;
  border-radius:50%;
  background:#fff;
  cursor:pointer;
  border:none;
  box-shadow:0 0 6px rgba(0,0,0,.3);
}

/* Back to top */
.back-to-top{
  position:fixed;
  bottom:24px;
  right:24px;
  z-index:11;
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(20,20,24,.9);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  color:rgba(255,255,255,.9);
  font-size:20px;
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:opacity .25s ease, visibility .25s ease, transform .25s ease, background .2s ease;
}
.back-to-top.is-visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.back-to-top:hover{
  background:rgba(40,40,48,.95);
  color:#fff;
}

/* Easter egg - Call of the Night (↑↑↓↓←→←→ B A) */
.easter-egg{
  position:fixed;
  inset:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.78);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  opacity:0;
  visibility:hidden;
  transition:opacity .35s ease, visibility .35s ease;
}
.easter-egg.is-visible{
  opacity:1;
  visibility:visible;
}
.easter-egg.is-visible .easter-egg__inner{
  animation:easterEggIn .4s ease forwards;
}
@keyframes easterEggIn{
  from{
    opacity:0;
    transform:scale(0.92) translateY(10px);
  }
  to{
    opacity:1;
    transform:scale(1) translateY(0);
  }
}
.easter-egg__inner{
  position:relative;
  padding:32px 40px 28px;
  padding-right:48px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(16,16,20,.96);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  box-shadow:0 24px 64px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06) inset;
  max-width:92%;
  opacity:0;
}
.easter-egg__badge{
  display:inline-block;
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:rgba(255,255,255,.45);
  margin-bottom:14px;
}
.easter-egg__quote{
  font-size:clamp(17px, 2.8vw, 22px);
  line-height:1.65;
  color:rgba(255,255,255,.96);
  margin:0 0 12px;
  font-weight:500;
}
.easter-egg__source{
  font-size:13px;
  color:rgba(255,255,255,.48);
  margin:0;
}
.easter-egg__close{
  position:absolute;
  top:14px;
  right:14px;
  width:32px;
  height:32px;
  border:none;
  border-radius:50%;
  background:rgba(255,255,255,.1);
  color:rgba(255,255,255,.8);
  font-size:20px;
  line-height:1;
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.easter-egg__close:hover{
  background:rgba(255,255,255,.2);
  color:#fff;
}

/* Right-side player panel (resizable) */
.player-panel{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  width:320px;
  z-index:20;
  background:rgba(18,18,24,.62);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-left:1px solid rgba(255,255,255,.1);
  box-shadow:-8px 0 32px rgba(0,0,0,.4);
  transform:translateX(100%);
  transition:transform .3s ease;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.player-panel.is-open{
  transform:translateX(0);
}
.player-panel__resize{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:8px;
  cursor:ew-resize;
  z-index:2;
}
.player-panel__resize:hover{ background:rgba(255,255,255,.05); }
.player-panel__inner{
  flex:1;
  min-height:0;
  position:relative;
  display:flex;
  flex-direction:column;
  overflow-y:auto;
  padding:16px;
}
.player-panel__close{
  position:absolute;
  top:12px;
  right:12px;
  width:32px;
  height:32px;
  border:none;
  border-radius:50%;
  background:rgba(255,255,255,.1);
  color:rgba(255,255,255,.8);
  font-size:20px;
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.player-panel__close:hover{
  background:rgba(255,255,255,.2);
  color:#fff;
}

.player-panel__top{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding:10px 0 14px;
  flex-shrink:0;
}
.player-panel__cover{
  width:84px;
  height:84px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(0,0,0,.3);
  flex-shrink:0;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 0 0 1px rgba(255,255,255,.05) inset, 0 10px 30px rgba(0,0,0,.35);
}
.player-panel__cover--big{
  width:220px;
  height:220px;
  border-radius:999px;
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset, 0 18px 60px rgba(0,0,0,.45);
}
.player-panel__cover img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.player-panel__title{
  margin-top:12px;
  font-size:22px;
  font-weight:800;
  color:rgba(255,255,255,.96);
  text-align:center;
  max-width:100%;
  padding:0 10px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.player-panel__subtitle{
  margin-top:6px;
  font-size:13px;
  color:rgba(255,255,255,.6);
  text-align:center;
  padding:0 10px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.player-panel__main-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:0 0 12px;
  flex-shrink:0;
}
.player-panel__icon--sm{
  width:34px;
  height:34px;
}
.player-panel__icon--play{
  width:44px;
  height:44px;
  border-radius:50%;
  background:rgba(255,255,255,.18);
  font-size:16px;
  line-height:1;
}
.player-panel__icon--play:hover{
  background:rgba(255,255,255,.26);
}
.player-panel__icon--play .panel-play-icon{
  display:inline-block;
  margin-left:2px;
}
.player-panel__seek{
  padding:0 0 14px;
  flex-shrink:0;
}
.player-panel__seek-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:8px;
}
.player-panel__time{
  font-family:var(--mono);
  font-size:11px;
  color:rgba(255,255,255,.45);
}
.player-panel__seek-range{
  width:100%;
  height:6px;
  -webkit-appearance:none;
  appearance:none;
  background:rgba(255,255,255,.18);
  border-radius:999px;
  outline:none;
}
.player-panel__seek-range::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#fff;
  cursor:pointer;
  box-shadow:0 0 10px rgba(0,0,0,.35);
}
.player-panel__seek-range::-moz-range-thumb{
  width:16px;
  height:16px;
  border-radius:50%;
  background:#fff;
  cursor:pointer;
  border:none;
  box-shadow:0 0 10px rgba(0,0,0,.35);
}

.player-panel__controls{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 0 14px;
  flex-shrink:0;
  justify-content:center;
  flex-wrap:wrap;
}
.player-panel__icon{
  width:36px;
  height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:none;
  border-radius:10px;
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.9);
  cursor:pointer;
  transition:background .15s ease, color .15s ease, opacity .15s ease;
}
.player-panel__icon:hover{
  background:rgba(255,255,255,.14);
  color:#fff;
}
.player-panel__icon--disabled{
  opacity:.45;
  cursor:not-allowed;
}
.player-panel__icon--disabled:hover{
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.9);
}
.player-panel__vol{
  flex:1;
  min-width:180px;
  display:flex;
  align-items:center;
  gap:10px;
}
.player-panel__vol.is-muted{
  opacity:.7;
}
.player-panel__vol-btn{
  width:36px;
  height:36px;
  border:none;
  border-radius:10px;
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.9);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background .15s ease, color .15s ease;
}
.player-panel__vol-btn--sm{
  width:34px;
  height:34px;
}
.player-panel__vol-btn:hover{
  background:rgba(255,255,255,.14);
  color:#fff;
}
.panel-mute-icon{ display:block; }
.panel-mute-icon--muted{ display:none; }
.player-panel__vol.is-muted .panel-mute-icon--on{ display:none; }
.player-panel__vol.is-muted .panel-mute-icon--muted{ display:block; }
.player-panel__vol-range{
  width:100%;
  height:6px;
  -webkit-appearance:none;
  appearance:none;
  background:rgba(255,255,255,.18);
  border-radius:999px;
  outline:none;
}
.player-panel__vol-range::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#fff;
  cursor:pointer;
  box-shadow:0 0 10px rgba(0,0,0,.35);
}
.player-panel__vol-range::-moz-range-thumb{
  width:16px;
  height:16px;
  border-radius:50%;
  background:#fff;
  cursor:pointer;
  border:none;
  box-shadow:0 0 10px rgba(0,0,0,.35);
}

.player-panel__clip{
  min-height:540px;
  flex:0 0 auto;
  overflow:hidden;
  display:flex;
  align-items:stretch;
  margin-bottom:14px;
}
.player-panel__clip-inner{
  width:100%;
  min-height:100%;
  display:flex;
  flex-direction:column;
}
.player-panel__clip-label{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.12em;
  color:rgba(255,255,255,.5);
  text-transform:uppercase;
  margin-bottom:6px;
  flex-shrink:0;
}
.player-panel__clip-v{
  flex:1;
  min-height:480px;
  border-radius:12px;
  overflow:hidden;
  position:relative;
  background:rgba(0,0,0,.4);
}
.player-panel__clip-v::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.4);
  pointer-events:none;
  transition:opacity 1.1s ease;
  border-radius:10px;
}
.player-panel__clip-v:hover::after{
  opacity:0;
}
.player-panel__clip-v img,
.player-panel__clip-v video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center center;
  transform:scale(1.32);
}
.player-panel__clip-v video{
  background:#000;
}
.player-panel__clip-overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:16px 14px;
  background:linear-gradient(to top, rgba(0,0,0,.75) 0%, transparent 50%);
  border-radius:10px;
}
.player-panel__clip-overlay .player-panel__clip-copy{
  pointer-events:auto;
}
.player-panel__clip-bottom{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
}
.player-panel__clip-meta{
  display:flex;
  flex-direction:column;
  gap:4px;
  flex-shrink:0;
  min-width:0;
}
.player-panel__clip-title{
  font-size:20px;
  font-weight:800;
  color:#fff;
  line-height:1.2;
  text-shadow:0 1px 4px rgba(0,0,0,.5);
}
.player-panel__clip-artist{
  font-size:14px;
  color:rgba(255,255,255,.9);
  text-shadow:0 1px 3px rgba(0,0,0,.4);
}
.player-panel__clip-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}
.player-panel__clip-copy-wrap{
  position:relative;
}
.player-panel__clip-verified{
  width:32px;
  height:32px;
  border-radius:50%;
  background:rgba(0,0,0,.45);
  flex-shrink:0;
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,.95);
}
.player-panel__clip-verified::after{
  content:"";
  width:5px;
  height:9px;
  margin-bottom:2px;
  margin-left:1px;
  border:solid currentColor;
  border-width:0 1.5px 1.5px 0;
  transform:rotate(45deg);
}
.player-panel__clip-copy{
  width:32px;
  height:32px;
  border:none;
  border-radius:50%;
  background:rgba(0,0,0,.45);
  color:rgba(255,255,255,.95);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transition:opacity .35s ease, background .2s ease;
}
.player-panel__clip-v:hover .player-panel__clip-copy{
  opacity:1;
}
.player-panel__clip-copy:hover{
  background:rgba(0,0,0,.65);
  color:#fff;
}
.player-panel__clip-copied-toast{
  position:absolute;
  bottom:100%;
  left:50%;
  margin-bottom:6px;
  transform:translateX(-50%);
  padding:6px 10px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.04em;
  color:#fff;
  background:rgba(0,0,0,.8);
  border-radius:8px;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
}
.player-panel__clip-copied-toast.is-visible{
  opacity:1;
}
.player-panel__scroll{
  flex:1;
  min-height:0;
  overflow-y:auto;
}
.player-panel__artist-title{
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:rgba(255,255,255,.5);
  margin:0 0 10px;
}
.player-panel__artist-text{
  font-size:14px;
  line-height:1.6;
  color:rgba(255,255,255,.8);
  margin:0;
}

/* Fullscreen player view */
.player-fullscreen{
  position:fixed;
  inset:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
}
.player-fullscreen.is-visible{
  opacity:1;
  visibility:visible;
}
.player-fullscreen__bg{
  position:absolute;
  inset:0;
  background-color:#1f1a28;
  background-size:cover;
  background-position:center;
  transition:background-color .4s ease;
}
.player-fullscreen__bg.has-color{
  filter:none;
}
.player-fullscreen__inner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  justify-items:center;
  gap:32px;
  width:100%;
  max-width:1200px;
  padding:32px;
}
.player-fullscreen__left{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  justify-self:end;
  padding-right:24px;
}
.player-fullscreen__hint{
  font-size:11px;
  color:rgba(255,255,255,.45);
  margin:0;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.player-fullscreen__controls{
  display:flex;
  align-items:center;
  gap:12px;
}
.player-fullscreen__btn{
  width:48px;
  height:48px;
  border:none;
  border-radius:50%;
  background:rgba(255,255,255,.12);
  color:#fff;
  font-size:20px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .2s ease, color .2s ease;
}
.player-fullscreen__btn:hover{
  background:rgba(255,255,255,.22);
  color:#fff;
}
.player-fullscreen__btn--play{
  width:56px;
  height:56px;
  font-size:24px;
}
.player-fullscreen__btn--sm{
  width:40px;
  height:40px;
  font-size:16px;
}
.player-fullscreen__btn--exit{
  margin-top:8px;
  background:rgba(255,255,255,.08);
  font-size:18px;
}
.player-fullscreen__seek{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  max-width:220px;
}
.player-fullscreen__time{
  font-family:var(--mono);
  font-size:12px;
  color:rgba(255,255,255,.6);
  flex-shrink:0;
}
.player-fullscreen__range{
  flex:1;
  height:6px;
  -webkit-appearance:none;
  appearance:none;
  background:rgba(255,255,255,.2);
  border-radius:999px;
  outline:none;
}
.player-fullscreen__range::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#fff;
  cursor:pointer;
}
.player-fullscreen__range::-moz-range-thumb{
  width:14px;
  height:14px;
  border-radius:50%;
  background:#fff;
  cursor:pointer;
  border:none;
}
.player-fullscreen__range--vol{
  max-width:100px;
}
.player-fullscreen__vol{
  display:flex;
  align-items:center;
  gap:10px;
}
.fs-mute-icon{ display:block; }
.fs-mute-icon--muted{ display:none; }
.fs-mute-btn.is-muted .fs-mute-icon--on{ display:none; }
.fs-mute-btn.is-muted .fs-mute-icon--muted{ display:block; }
.player-fullscreen__center{
  display:flex;
  align-items:center;
  justify-content:center;
}
.player-fullscreen__cover-wrap{
  width:clamp(240px, 40vw, 380px);
  height:clamp(240px, 40vw, 380px);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.player-fullscreen__cover{
  width:100%;
  height:100%;
  object-fit:cover;
}
.player-fullscreen__right{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-self:start;
  padding-left:24px;
  text-align:left;
}
.player-fullscreen__track{
  font-size:clamp(20px, 3vw, 32px);
  font-weight:700;
  color:#fff;
  margin-bottom:6px;
  line-height:1.2;
}
.player-fullscreen__artist{
  font-size:16px;
  color:rgba(255,255,255,.8);
}

@media (max-width: 768px) {
  .player-fullscreen__inner{
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto;
  }
  .player-fullscreen__left{ justify-self:center; padding-right:0; }
  .player-fullscreen__right{ justify-self:center; padding-left:0; text-align:center; align-items:center; }
}

/* Soon toast */
.soon-toast{
  position:fixed;
  bottom:80px;
  left:50%;
  transform:translateX(-50%) translateY(10px);
  padding:10px 20px;
  border-radius:10px;
  background:rgba(20,20,28,.95);
  border:1px solid rgba(255,255,255,.15);
  color:rgba(255,255,255,.9);
  font-size:14px;
  z-index:30;
  opacity:0;
  visibility:hidden;
  transition:opacity .25s ease, visibility .25s ease, transform .25s ease;
}
.soon-toast.is-visible{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0);
}

@media (max-width: 980px){
  .card{grid-column:span 6}
}
@media (max-width: 680px){
  .hero__top{align-items:center;flex-direction:column}
  .hero__meta{justify-content:center}
  .card{grid-column:span 12}
}

@media (max-width: 680px){
  .findme{ grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important}
  .boot, .project, .link{transition:none !important}
  .card, .boot__center{ animation: none !important; }
}