@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --bg:#080b12;
  --bg2:#0f1420;
  --text:#f5f7fb;
  --muted:#8f9bad;
  --line:rgba(255,255,255,.09);
  --glass:rgba(15,20,32,.58);
  --glass-strong:rgba(19,25,40,.82);
  --accent:#8eb7ff;
  --accent2:#b89cff;
  --shadow:0 30px 80px rgba(0,0,0,.35);
}

html[data-theme="light"]{
  --bg:#eef3fb;
  --bg2:#f8fbff;
  --text:#101421;
  --muted:#667085;
  --line:rgba(18,25,38,.09);
  --glass:rgba(255,255,255,.64);
  --glass-strong:rgba(255,255,255,.84);
  --accent:#4c7fff;
  --accent2:#9a63ff;
  --shadow:0 30px 80px rgba(75,98,135,.16);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(circle at 20% 10%,rgba(94,128,255,.13),transparent 28%),
    radial-gradient(circle at 80% 30%,rgba(174,107,255,.12),transparent 22%),
    linear-gradient(180deg,var(--bg),var(--bg2));
  font-family:Inter,system-ui,sans-serif;
  min-height:100vh;
  overflow-x:hidden;
  transition:background .4s,color .4s;
}

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

#bg-canvas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:-5;
  opacity:.7;
}

.bg-glow{
  position:fixed;
  width:34vw;
  aspect-ratio:1;
  filter:blur(90px);
  border-radius:999px;
  z-index:-4;
  opacity:.11;
  pointer-events:none;
}
.bg-glow-a{left:-8vw;top:18vh;background:#5f86ff}
.bg-glow-b{right:-8vw;bottom:10vh;background:#a56fff}

.topbar{
  position:fixed;
  top:18px;
  left:50%;
  transform:translateX(-50%);
  width:min(1120px,calc(100% - 32px));
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 18px;
  background:rgba(10,13,20,.48);
  border:1px solid var(--line);
  backdrop-filter:blur(22px) saturate(140%);
  border-radius:20px;
  z-index:20;
  box-shadow:0 12px 50px rgba(0,0,0,.15);
}
html[data-theme="light"] .topbar{background:rgba(255,255,255,.56)}

.brand{
  display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.02em
}
.brand-dot{
  width:9px;height:9px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 24px var(--accent)
}

.desktop-nav{display:flex;gap:8px}
.nav-link{
  color:var(--muted);
  padding:10px 14px;
  border-radius:12px;
  transition:.25s ease
}
.nav-link:hover,.nav-link.active{
  color:var(--text);
  background:rgba(255,255,255,.06)
}

.top-actions{display:flex;gap:8px}
.icon-btn{
  width:40px;height:40px;border:1px solid var(--line);border-radius:12px;
  background:rgba(255,255,255,.04);color:var(--text);cursor:pointer;
  transition:.2s transform,.2s background
}
.icon-btn:hover{transform:translateY(-2px);background:rgba(255,255,255,.08)}

.island{
  position:fixed;
  top:96px;
  left:50%;
  transform:translateX(-50%);
  height:34px;
  min-width:220px;
  padding:0 14px;
  border-radius:999px;
  color:#fff;
  background:rgba(3,5,9,.9);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(18px);
  z-index:18;
  display:grid;
  place-items:center;
  box-shadow:0 10px 40px rgba(0,0,0,.28);
}
.island-layer{
  grid-area:1/1;
  opacity:0;
  transform:translateY(3px);
  pointer-events:none;
  transition:.25s ease;
  font-size:12px;
  display:flex;
  align-items:center;
  gap:9px
}
.island-layer.active{opacity:1;transform:none}
.pulse{
  width:6px;height:6px;border-radius:50%;background:#7cff9d;
  box-shadow:0 0 14px #7cff9d
}

.section{
  width:min(1120px,calc(100% - 32px));
  margin:0 auto;
  min-height:100vh;
}

.hero{
  display:grid;
  grid-template-columns:1.06fr .94fr;
  align-items:center;
  gap:70px;
  padding-top:120px;
  position:relative;
}
.eyebrow,.section-kicker,.card-kicker,.mini-label{
  font-family:"JetBrains Mono",monospace;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:12px;
  color:var(--muted)
}
.hero-title{
  font-size:clamp(72px,10vw,150px);
  line-height:.86;
  margin:12px 0 24px;
  letter-spacing:-.08em;
}
.hero-title span{
  display:inline-block;
  animation:floatLetter 4s ease-in-out infinite;
}
.hero-title span:nth-child(2){animation-delay:.12s}
.hero-title span:nth-child(3){animation-delay:.24s}
.hero-title span:nth-child(4){animation-delay:.36s}
@keyframes floatLetter{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

.hero-subtitle{
  color:var(--text);
  font-weight:600;
  letter-spacing:.02em
}
.hero-note{
  color:var(--muted);
  font-size:17px;
  margin:10px 0 28px
}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{
  border-radius:14px;
  padding:12px 18px;
  border:1px solid var(--line);
  cursor:pointer;
  transition:.2s ease
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:white;border:none;font-weight:700;
  box-shadow:0 12px 30px rgba(109,118,255,.22)
}
.btn-ghost{background:rgba(255,255,255,.04);color:var(--text)}
.social-row{
  display:flex;gap:18px;flex-wrap:wrap;margin-top:34px;color:var(--muted);font-size:14px
}
.social-row a:hover{color:var(--text)}

.hero-visual{
  min-height:560px;
  position:relative;
  display:grid;
  place-items:center;
}
.orb-shell{
  width:min(380px,72vw);
  aspect-ratio:1;
  position:relative;
  display:grid;
  place-items:center
}
.orb{
  position:absolute;
  inset:12%;
  border-radius:42% 58% 62% 38%/48% 37% 63% 52%;
  background:
    radial-gradient(circle at 30% 30%,rgba(255,255,255,.55),transparent 13%),
    radial-gradient(circle at 60% 65%,rgba(255,255,255,.08),transparent 26%),
    linear-gradient(135deg,#6ea6ff,#a47cff 52%,#ff8bc6);
  filter:saturate(110%);
  animation:morph 9s ease-in-out infinite, spin 18s linear infinite;
  box-shadow:0 0 100px rgba(118,133,255,.25)
}
.orb::after{
  content:"";
  position:absolute;
  inset:2px;
  border-radius:inherit;
  background:linear-gradient(145deg,rgba(255,255,255,.24),rgba(255,255,255,.02));
  mix-blend-mode:screen
}
@keyframes morph{
  0%,100%{border-radius:42% 58% 62% 38%/48% 37% 63% 52%}
  50%{border-radius:62% 38% 44% 56%/38% 55% 45% 62%}
}
@keyframes spin{to{transform:rotate(360deg)}}
.orb-ring{
  position:absolute;
  border:1px solid rgba(255,255,255,.14);
  border-radius:50%
}
.ring-1{inset:4%;animation:spin 24s linear infinite reverse}
.ring-2{inset:20%;border-style:dashed;animation:spin 14s linear infinite}
.orb-core{
  width:96px;height:96px;border-radius:30px;
  display:grid;place-items:center;
  font-size:42px;font-weight:800;
  background:rgba(8,12,22,.52);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(14px);
  z-index:2
}
.floating-card{
  position:absolute;
  min-width:150px;
  padding:14px 16px;
  border-radius:18px;
  background:var(--glass);
  border:1px solid var(--line);
  backdrop-filter:blur(18px);
  box-shadow:var(--shadow)
}
.floating-card b{display:block;margin-top:6px}
.card-a{top:18%;left:0;animation:floatCard 5s ease-in-out infinite}
.card-b{right:0;bottom:20%;animation:floatCard 5s ease-in-out infinite reverse}
@keyframes floatCard{50%{transform:translateY(-12px)}}

.scroll-cue{
  position:absolute;
  left:0;bottom:28px;
  display:flex;align-items:center;gap:10px;
  color:var(--muted);
  font-size:10px;letter-spacing:.18em
}
.scroll-cue i{width:42px;height:1px;background:var(--line);position:relative}
.scroll-cue i::after{
  content:"";position:absolute;width:10px;height:1px;background:var(--text);left:0;
  animation:scrollLine 1.8s ease-in-out infinite
}
@keyframes scrollLine{50%{left:32px}}

.content-section{padding:120px 0 80px}
.section-heading{max-width:760px;margin-bottom:44px}
.section-heading h2{
  font-size:clamp(38px,5vw,72px);
  line-height:1.02;
  letter-spacing:-.05em;
  margin:10px 0 18px
}
.section-heading p{color:var(--muted);font-size:17px;line-height:1.8}

.glass-card{
  background:var(--glass);
  border:1px solid var(--line);
  border-radius:28px;
  backdrop-filter:blur(20px);
  box-shadow:var(--shadow)
}
.about-grid{
  display:grid;
  grid-template-columns:1.4fr .8fr;
  gap:20px
}
.profile-card{padding:28px;display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center}
.avatar{
  width:88px;height:88px;border-radius:24px;display:grid;place-items:center;
  font-size:34px;font-weight:800;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:white
}
.profile-card h3,.music-meta h3{font-size:28px;margin:6px 0}
.profile-card p,.music-meta p{color:var(--muted);margin:0}
.stats{
  grid-column:1/-1;
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
  padding-top:22px
}
.stats div{display:flex;flex-direction:column}
.stats b{font-size:26px}
.stats span{color:var(--muted);font-size:12px;margin-top:4px}
.quote-card{padding:28px;display:flex;flex-direction:column;justify-content:space-between}
.quote-card blockquote{
  font-size:26px;line-height:1.4;letter-spacing:-.03em;margin:34px 0
}
.quote-card span{color:var(--muted)}

.stack-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px
}
.stack-card{
  min-height:120px;
  display:flex;
  align-items:center;
  gap:16px;
  padding:20px;
  border-radius:22px;
  background:rgba(255,255,255,.035);
  border:1px solid var(--line);
  transition:.22s ease
}
.stack-card:hover{
  transform:translateY(-5px);
  background:rgba(255,255,255,.065)
}
.stack-icon{
  width:54px;height:54px;border-radius:16px;
  display:grid;place-items:center;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  font-family:"JetBrains Mono",monospace;font-weight:600
}
.stack-card b{display:block}
.stack-card small{display:block;color:var(--muted);margin-top:5px}

.music-card{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:32px;
  padding:30px
}
.cover{
  width:180px;aspect-ratio:1;border-radius:28px;
  display:grid;place-items:center;
  background:
    radial-gradient(circle at 30% 30%,rgba(255,255,255,.2),transparent 20%),
    linear-gradient(135deg,#253451,#6d5ca3 60%,#d37eae);
  box-shadow:0 18px 50px rgba(0,0,0,.28)
}
.cover-disc{
  width:62%;aspect-ratio:1;border-radius:50%;
  border:24px solid rgba(5,8,14,.66);
  background:radial-gradient(circle,#e6e8ee 0 9%,#0b0f17 10% 100%);
  animation:spin 12s linear infinite paused
}
body.playing .cover-disc{animation-play-state:running}
.progress{
  height:6px;background:rgba(255,255,255,.08);
  border-radius:999px;margin:26px 0 18px;overflow:hidden
}
.progress-fill{
  width:38%;height:100%;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  border-radius:inherit
}
.player-actions{display:flex;gap:10px}
.player-btn{
  width:42px;height:42px;border-radius:13px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.05);color:var(--text);cursor:pointer
}
.player-main{
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff;border:none
}
.equalizer{
  height:70px;display:flex;align-items:flex-end;gap:5px
}
.equalizer i{
  width:5px;height:24%;
  border-radius:999px;
  background:linear-gradient(var(--accent2),var(--accent));
  animation:eq 1s ease-in-out infinite alternate paused
}
body.playing .equalizer i{animation-play-state:running}
.equalizer i:nth-child(2){animation-delay:.15s}
.equalizer i:nth-child(3){animation-delay:.3s}
.equalizer i:nth-child(4){animation-delay:.45s}
.equalizer i:nth-child(5){animation-delay:.6s}
@keyframes eq{to{height:100%}}

.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:.75s cubic-bezier(.2,.7,.2,1)
}
.reveal.in{opacity:1;transform:none}

footer{
  width:min(1120px,calc(100% - 32px));
  margin:0 auto;
  padding:32px 0 90px;
  border-top:1px solid var(--line);
  color:var(--muted);
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:13px
}

.mobile-nav{display:none}

@media (max-width:900px){
  .desktop-nav{display:none}
  .hero{grid-template-columns:1fr;gap:10px;padding-top:150px}
  .hero-copy{text-align:center}
  .hero-actions,.social-row{justify-content:center}
  .hero-visual{min-height:430px}
  .scroll-cue{display:none}
  .about-grid{grid-template-columns:1fr}
  .stack-grid{grid-template-columns:repeat(2,1fr)}
  .music-card{grid-template-columns:1fr;text-align:center}
  .cover{margin:auto}
  .player-actions{justify-content:center}
  .equalizer{justify-content:center}
  .mobile-nav{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    position:fixed;
    left:50%;bottom:14px;transform:translateX(-50%);
    width:min(520px,calc(100% - 26px));
    border:1px solid var(--line);
    background:var(--glass-strong);
    backdrop-filter:blur(20px);
    border-radius:20px;
    z-index:30;
    padding:8px
  }
  .mobile-nav a{
    display:flex;flex-direction:column;align-items:center;gap:4px;
    font-size:17px;padding:8px;border-radius:13px
  }
  .mobile-nav span{font-size:9px;color:var(--muted)}
}

@media (max-width:600px){
  .topbar{height:58px}
  .island{top:86px}
  .hero-title{font-size:22vw}
  .hero-visual{min-height:330px}
  .floating-card{min-width:120px;padding:11px 12px}
  .stack-grid{grid-template-columns:1fr}
  .profile-card{grid-template-columns:1fr;text-align:center}
  .avatar{margin:auto}
  footer{flex-direction:column}
}


/* ===== Dynamic Island v2 ===== */
.dynamic-island{
  position:fixed;
  top:95px;
  left:50%;
  transform:translateX(-50%);
  z-index:40;
  pointer-events:none;
}

.island-shell{
  width:226px;
  height:36px;
  padding:0 14px;
  border-radius:999px;
  background:rgba(3,5,9,.96);
  color:#fff;
  border:1px solid rgba(255,255,255,.09);
  box-shadow:
    0 16px 44px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter:blur(24px) saturate(140%);
  display:grid;
  place-items:center;
  transition:
    width .48s cubic-bezier(.2,.85,.2,1),
    height .48s cubic-bezier(.2,.85,.2,1),
    border-radius .48s cubic-bezier(.2,.85,.2,1),
    padding .48s cubic-bezier(.2,.85,.2,1),
    transform .24s ease;
  overflow:hidden;
  pointer-events:auto;
  isolation:isolate;
}

.island-shell::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:inherit;
  background:linear-gradient(
    180deg,
    rgba(255,255,255,.055),
    transparent 42%
  );
  pointer-events:none;
  z-index:-1;
}

.island-shell:hover{
  transform:translateY(-1px);
}

.island-shell[data-state="music"]{
  width:430px;
  height:76px;
  border-radius:27px;
  padding:0 16px;
}

.island-shell[data-state="nav"]{
  width:460px;
  height:64px;
  border-radius:24px;
  padding:0 22px;
}

.island-shell[data-state="confirm"]{
  width:520px;
  height:88px;
  border-radius:28px;
  padding:0 16px 0 18px;
}

.island-shell[data-state="contact"]{
  width:400px;
  height:76px;
  border-radius:26px;
  padding:0 16px 0 18px;
}

.island-shell[data-state="toast"]{
  width:280px;
  height:44px;
  border-radius:999px;
}

.island-shell .island-layer{
  grid-area:1/1;
  width:100%;
  height:100%;
  opacity:0;
  transform:translateY(7px) scale(.985);
  filter:blur(4px);
  pointer-events:none;
  transition:
    opacity .2s ease,
    transform .32s cubic-bezier(.2,.8,.2,1),
    filter .2s ease;
}

.island-shell .island-layer.active{
  opacity:1;
  transform:none;
  filter:none;
  pointer-events:auto;
}

.island-idle{
  display:flex;
  align-items:center;
  justify-content:center;
}

.island-brand{
  font-size:12px;
  font-weight:650;
  letter-spacing:.025em;
  color:rgba(255,255,255,.86);
}

.island-music{
  display:grid;
  grid-template-columns:48px auto 1fr 38px;
  align-items:center;
  gap:12px;
}

.island-cover{
  width:44px;
  height:44px;
  border-radius:12px;
  background:
    radial-gradient(circle at 25% 25%,rgba(255,255,255,.35),transparent 18%),
    linear-gradient(135deg,#4065a7,#8e68bd 60%,#d579a7);
  display:grid;
  place-items:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
}

.island-cover-disc{
  width:22px;
  height:22px;
  border-radius:50%;
  background:
    radial-gradient(circle,#eceef5 0 18%,#11141a 19% 100%);
  box-shadow:0 0 0 5px rgba(0,0,0,.2);
  animation:islandDisc 6s linear infinite paused;
}

body.playing .island-cover-disc{animation-play-state:running}
@keyframes islandDisc{to{transform:rotate(360deg)}}

.island-eq{
  display:flex;
  align-items:center;
  gap:2px;
  height:22px;
}

.island-eq i{
  width:3px;
  height:30%;
  border-radius:999px;
  background:linear-gradient(#c4b2ff,#8eb7ff);
  animation:islandEq .7s ease-in-out infinite alternate paused;
}
body.playing .island-eq i{animation-play-state:running}
.island-eq i:nth-child(2){animation-delay:.12s}
.island-eq i:nth-child(3){animation-delay:.24s}
.island-eq i:nth-child(4){animation-delay:.36s}
@keyframes islandEq{to{height:100%}}

.island-track{
  min-width:0;
}
.island-track b,
.island-track span{
  display:block;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.island-track b{font-size:13px}
.island-track span{
  margin-top:2px;
  color:rgba(255,255,255,.52);
  font-size:10px;
}

.island-mini-btn{
  width:34px;
  height:34px;
  border:0;
  border-radius:50%;
  background:#fff;
  color:#05070b;
  cursor:pointer;
  font-size:12px;
  display:grid;
  place-items:center;
}

.island-nav-layer{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
}
.island-nav-layer a{
  color:rgba(255,255,255,.72);
  font-size:12px;
  font-weight:600;
  transition:.2s ease;
}
.island-nav-layer a:hover{color:#fff}
.island-nav-layer span{
  width:30px;
  height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,.08),rgba(255,255,255,.28),rgba(255,255,255,.08));
}

.island-confirm{
  display:grid;
  grid-template-columns:48px 1fr auto auto;
  align-items:center;
  gap:12px;
}
.confirm-icon{
  width:42px;
  height:42px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,#2b3342,#10141c);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.confirm-copy{
  min-width:0;
}
.confirm-copy b,
.confirm-copy span{
  display:block;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.confirm-copy b{font-size:12px}
.confirm-copy span{
  margin-top:3px;
  color:rgba(255,255,255,.5);
  font-size:10px;
}

.island-action{
  height:34px;
  padding:0 14px;
  border:0;
  border-radius:999px;
  background:#fff;
  color:#06080d;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
}
.island-action.ghost{
  color:#fff;
  background:rgba(255,255,255,.08);
}

.island-contact{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:14px;
}
.contact-copy b,
.contact-copy span{display:block}
.contact-copy b{font-size:13px}
.contact-copy span{
  margin-top:3px;
  color:rgba(255,255,255,.5);
  font-size:10px;
}

.island-toast{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  font-size:12px;
}
.toast-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#79ffa0;
  box-shadow:0 0 14px rgba(121,255,160,.9);
}

@media (max-width:600px){
  .dynamic-island{top:84px}
  .island-shell[data-state="music"]{width:min(92vw,400px)}
  .island-shell[data-state="nav"]{width:min(92vw,440px)}
  .island-shell[data-state="confirm"]{
    width:min(94vw,500px);
    height:96px;
    grid-template-columns:42px 1fr;
  }
  .island-confirm{
    grid-template-columns:42px 1fr auto auto;
    gap:8px;
  }
  .island-nav-layer{gap:9px}
  .island-nav-layer span{width:16px}
}
/* Blue atmosphere and island layout repair */
:root{--accent:#76b9ff;--accent2:#319cdb}
html[data-theme="light"]{--accent:#286dce;--accent2:#1684b2}
body{isolation:isolate;background:#061020}
#bg-canvas{z-index:-3;opacity:.68;pointer-events:none}
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(110deg,rgba(2,9,23,.78),rgba(4,17,39,.25))}
html[data-theme="light"] body{background:#e9f3ff}
html[data-theme="light"] body::before{background:rgba(233,243,255,.78)}
.bg-glow{z-index:-1}.bg-glow-b{background:#168ce5}
.orb{background:radial-gradient(circle at 30% 30%,#d6f3ff88,transparent 13%),linear-gradient(135deg,#79d6ff,#327bea 52%,#124c94)}
.cover,.island-cover{background:linear-gradient(135deg,#173052,#2675b2 60%,#82c9e6)}
.island-eq i{background:linear-gradient(#92e2ff,#4c91ee)}
.dynamic-island{max-width:calc(100vw - 24px)}
.island-shell{position:relative;display:block;max-width:calc(100vw - 24px);padding:0;cursor:pointer}
.island-shell .island-layer{position:absolute;inset:0;width:100%;height:100%;min-width:0;padding:12px 18px;visibility:hidden;transition:opacity .18s ease,transform .3s ease,filter .2s ease,visibility .18s}
.island-shell .island-layer.active{visibility:visible;transition-delay:.08s}
.island-shell .island-idle{padding:0 14px}
.island-shell[data-state]{padding:0}
.island-shell[data-state="idle"]{width:226px;height:36px;border-radius:999px}
.island-shell[data-state="nav"]{width:390px;height:60px}
.island-shell[data-state="music"]{width:370px;height:76px}
.island-shell[data-state="contact"]{width:370px;height:84px}
.island-shell[data-state="confirm"]{width:490px;height:88px}
.island-shell[data-state="toast"]{width:340px;height:48px}
.island-shell .island-music{display:grid;grid-template-columns:44px 18px minmax(0,1fr) 34px;gap:10px}
.island-shell .island-confirm{display:grid;grid-template-columns:42px minmax(0,1fr) auto auto;gap:10px}
.island-shell .island-contact{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px}
.contact-copy{min-width:0;user-select:text}.contact-copy b{overflow-wrap:anywhere}.contact-copy span{line-height:1.5}
.island-nav-layer a{padding:9px 2px}.island-nav-layer a.active{color:#8fccff}
.island-nav-layer span{flex:1;max-width:30px}.island-nav-layer{gap:12px}
.island-shell:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid #91d5ff;outline-offset:4px}
.player-btn:disabled{opacity:.3;cursor:default}
@media(max-width:600px){
 .dynamic-island{top:87px}
 .island-shell[data-state="confirm"]{height:116px}
 .island-shell .island-confirm{grid-template-columns:32px minmax(0,1fr) auto;gap:8px;padding:12px 16px}
 .confirm-icon{width:30px;height:30px}
 .confirm-copy{grid-column:2/4}
 #confirm-cancel{grid-column:2}#confirm-go{grid-column:3}
 .island-shell .island-nav-layer{gap:8px;padding:10px 14px}
 .island-shell .island-music{padding:12px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.island-shell .island-layer.active{transition-delay:0s;visibility:visible}
@media(max-width:900px){.hero{padding-top:210px}}
@media(max-width:600px){.hero{padding-top:225px}}