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

:root{
  --pink:#f7b3c8;         /* baby pink */
  --pink2:#ffd6e6;
  --ink:#0b0b10;          /* near black */
  --paper:#ffffff;
  --mist:#f4f4f7;
  --panel:#f8f8fb;
  --edge: rgba(15,15,24,.10);
  --shadow: rgba(10,10,16,.22);
  --shadow2: rgba(10,10,16,.12);
  --glow: rgba(247,179,200,.55);
  --bloom: rgba(224,85,138,.32);
  --bloom-strong: rgba(224,85,138,.22);
  --wave1: rgba(224,85,138,.22);
  --wave2: rgba(255,214,230,.18);
  --wave3: rgba(140,120,255,.12);
  --radius: 22px;
  --radius-lg: 30px;
  --font: 'Nunito', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

  --screen-w: min(980px, 92vw);
  --screen-h-top: 280px;
  --screen-h-bottom: 370px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:
    radial-gradient(1200px 700px at 20% 10%, rgba(247,179,200,.30), transparent 55%),
    radial-gradient(900px 600px at 95% 25%, rgba(247,179,200,.22), transparent 60%),
    linear-gradient(180deg, #fff, #f3f3f7);
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:-12% -12%;
  background:
    radial-gradient(360px 260px at 18% 22%, var(--bloom), transparent 62%),
    radial-gradient(420px 300px at 78% 18%, var(--bloom-strong), transparent 68%),
    radial-gradient(380px 280px at 50% 78%, rgba(255,255,255,.35), transparent 70%);
  filter: blur(48px);
  opacity:.75;
  mix-blend-mode:screen;
  pointer-events:none;
  z-index:0;
}
body::after{
  content:"";
  position:fixed;
  inset:-20% -20%;
  background:
    radial-gradient(900px 520px at 20% 30%, var(--wave1), transparent 70%),
    radial-gradient(760px 520px at 80% 20%, var(--wave3), transparent 70%),
    repeating-linear-gradient(115deg,
      rgba(255,255,255,.08) 0 8px,
      rgba(255,255,255,0) 8px 20px);
  filter: blur(36px);
  opacity:.45;
  mix-blend-mode:soft-light;
  animation: waveDrift 28s ease-in-out infinite alternate;
  pointer-events:none;
  z-index:0;
}

@keyframes waveDrift{
  0%{ transform: translate3d(-10px,-6px,0) scale(1); filter: blur(36px); }
  50%{ transform: translate3d(12px,10px,0) scale(1.03); filter: blur(40px); }
  100%{ transform: translate3d(-6px,14px,0) scale(1.05); filter: blur(38px); }
}

.shell{
  min-height:100%;
  display:grid;
  place-items:center;
  padding: 28px 14px 40px;
  position:relative;
  z-index:1;
}

.ds{
  width: var(--screen-w);
  display:grid;
  gap: 16px;
}

/* --- 3DS shell edge / hinge --- */
.hinge{
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(10,10,16,.10), rgba(255,255,255,.75));
  box-shadow: 0 6px 16px rgba(0,0,0,.10) inset, 0 6px 14px rgba(0,0,0,.10);
}

/* --- Screens --- */
.screen{
  position:relative;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(200px 120px at 20% 0%, rgba(255,255,255,.9), rgba(255,255,255,0)),
    linear-gradient(180deg, var(--panel), #efeff4),
    repeating-linear-gradient(135deg,
      rgba(255,214,230,.06) 0 6px,
      rgba(255,214,230,0) 6px 18px);
  border: 1px solid var(--edge);
  box-shadow:
    0 20px 50px rgba(0,0,0,.14),
    0 2px 0 rgba(255,255,255,.85) inset,
    0 -2px 0 rgba(0,0,0,.06) inset;
  overflow:hidden;
}

.topScreen{ height: var(--screen-h-top); overflow: visible; }
.bottomScreen{ height: var(--screen-h-bottom); overflow: visible; }

/* subtle checker like the 3DS settings UI */
.screen::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.03) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0,0,0,.03) 1px, transparent 1px);
  background-size: 42px 42px;
  opacity:.25;
  pointer-events:none;
}

/* glossy highlight */
.screen::after{
  content:"";
  position:absolute; inset:-40% -10% auto -10%;
  height: 60%;
  background: radial-gradient(closest-side, rgba(255,255,255,.65), rgba(255,255,255,0));
  transform: rotate(-8deg);
  pointer-events:none;
}

/* --- status bar (3DS-ish) --- */
.statusBar{
  position:absolute;
  top: 12px; left: 12px; right: 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 16px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 20px rgba(0,0,0,.10);
  backdrop-filter: blur(10px);
}

.pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight:800;
  font-size: 12px;
  background: rgba(255,255,255,.8);
  border: 1px solid rgba(0,0,0,.06);
}
.pill .dot{
  width:8px; height:8px; border-radius:50%;
  background: var(--pink);
  box-shadow: 0 0 0 3px rgba(247,179,200,.25);
}
.statusLeft{ display:flex; gap: 8px; flex-wrap:wrap; align-items:center; }
.statusRight{ display:flex; gap: 8px; align-items:center; font-weight:800; }
.mono{ font-family:var(--mono); font-weight:600; }

.titleBlock{
  position:absolute;
  inset: 62px 18px 18px 18px;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
  align-items:end;
}

/* Simple boxed containers for header and sidebar */
.box{
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(245,245,250,.96));
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 12px 20px rgba(0,0,0,.08);
  padding: 10px;
}
.headerBox{ position: absolute; inset: 56px 16px auto 16px; z-index:3; }
.sidebarBox{ width: 132px; margin-right: 10px; flex: 0 0 132px; padding: 8px; }
.heroTitle{
  margin:0;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height:1.06;
  letter-spacing: -.02em;
}
.heroTitle .pink{ color: #e0558a; }
.heroSubtitle{
  margin: 8px 0 0;
  color: rgba(11,11,16,.72);
  font-weight:700;
}
.heroCard{
  align-self:stretch;
  border-radius: 26px;
  background:
    radial-gradient(140px 90px at 20% 10%, rgba(255,255,255,.8), rgba(255,255,255,0)),
    linear-gradient(180deg, rgba(247,179,200,.42), rgba(255,255,255,.78));
  border: 1px solid rgba(224,85,138,.25);
  box-shadow: 0 18px 30px rgba(0,0,0,.12);
  padding: 14px 14px 12px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap: 10px;
}
.heroCard .row{ display:flex; justify-content:space-between; gap: 10px; align-items:center; }
.badge{
  font-weight:900;
  font-size: 12px;
  letter-spacing: .02em;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(0,0,0,.06);
}
kbd.kbd{
  font-family:var(--mono);
  font-size:12px;
  padding: 2px 7px;
  border-radius: 8px;
  background: rgba(255,255,255,.8);
  border: 1px solid rgba(0,0,0,.08);
}

/* --- Bottom screen header --- */
.bottomHeader{
  position:absolute;
  top: 14px; left: 16px; right: 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}
.headerTitle{
  font-size: 16px;
  font-weight:900;
  letter-spacing: .02em;
}
.headerSubtitle{
  font-size: 12px;
  font-weight:800;
  color: rgba(11,11,16,.65);
  margin-top: 2px;
}
.headerBtns{ display:flex; gap: 10px; align-items:center; }
.miniBtn{
  width: 38px; height: 38px;
  border-radius: 14px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 16px rgba(0,0,0,.10);
  display:grid;
  place-items:center;
}
.miniBtn svg{ width:18px; height:18px; opacity:.85; }

.grid{
  position:relative;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
  margin: 66px 16px 16px;
}

/* --- Bottom layout: left sidebar of icons + main area --- */
.bottomLayout{
  position:absolute;
  left: 16px; right: 16px;
  top: 54px; bottom: 16px;
  display:flex;
  gap: 14px;
  align-items:flex-start;
}
.sidebar{
  width: 100%;
  display:flex;
  flex-direction:column;
  gap: 6px;
  position:relative;
  overflow:auto;
}
.sidebar .grid{
  position:static;
  display:flex;
  flex-direction:column;
  gap:6px;
  grid-template-columns: none;
  margin: 0;
}
.sidebar .iconBtn{
  width:100%;
  align-items:center;
  flex-direction:row;
  gap:6px;
  padding: 5px 6px;
}
.sidebar .iconFace{ width:42px; aspect-ratio:1/1; border-radius:10px; }
.sidebar .iconLabel{ text-align:left; font-size:11px; }

.mainArea{
  flex:1;
  position:relative;
  padding-top: 74px;
  display:flex;
  flex-direction:column;
  gap: 12px;
}

.infoCard{
  border-radius: 22px;
  padding: 18px;
  display:flex;
  flex-direction:column;
  gap: 12px;
  flex: 1 1 auto;
  min-height: 240px;
  background:
    radial-gradient(140px 90px at 20% 10%, rgba(255,255,255,.90), rgba(255,255,255,0)),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(245,245,250,.92));
  box-shadow: 0 14px 22px rgba(0,0,0,.10);
}
.infoName{
  font-size: 20px;
  font-weight:900;
  letter-spacing: -.01em;
}
.infoTitle{
  margin: 0;
  font-weight:800;
  color: rgba(11,11,16,.70);
}
.infoMeta{
  display:flex;
  gap: 8px;
  flex-wrap:wrap;
}
.infoHint{
  margin: 4px 0 0;
  color: rgba(11,11,16,.64);
  font-weight:800;
  line-height:1.3;
}
.pill.sm{
  padding: 5px 9px;
  font-size: 11px;
}

/* Mini terminal: black background with pink accents */
.miniTerminal{
  position:relative;
  width:100%;
  min-height:220px;
  border-radius: 14px;
  background: linear-gradient(180deg, #0b0b10, #151418);
  border: 1px solid rgba(224,85,138,.14);
  box-shadow: 0 14px 30px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.03);
  padding: 12px;
  display:flex;
  flex-direction:column;
  gap: 8px;
  font-family: var(--mono);
  color: #ffd6e6;
  overflow:visible;
}
.termOutput{
  flex:1 1 auto;
  overflow:auto;
  padding: 10px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  color: #ffd6e6;
  font-size: 13px;
}
.termOutput .cmd{ color: #ffb8d0; font-weight:700; }
.termRow{ display:flex; gap:10px; align-items:center; }
.termPrompt{ font-weight:800; background: rgba(255,182,200,0.05); padding:6px 8px; border-radius:8px; color:#ffd6e6; border: 1px solid rgba(247,179,200,.06); }
.termInput{ flex:1; padding:8px 10px; border-radius:10px; border:1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.02); color:#ffd6e6; font-family:var(--mono); font-size:14px; outline:none; }
.termInput::placeholder{ color: rgba(255,214,230,0.6); }
.termInput:focus{ box-shadow: 0 0 0 4px rgba(224,85,138,.08); }

/* Bloom effect for mini terminal */
.miniTerminal::before{
  content: "";
  position: absolute;
  left: -8%; right: -8%; top: -24%; bottom: -12%;
  border-radius: inherit;
  background:
    radial-gradient(40% 28% at 20% 12%, rgba(247,179,200,.42), rgba(247,179,200,0) 40%),
    radial-gradient(30% 20% at 80% 78%, rgba(255,214,230,.18), rgba(255,214,230,0) 40%);
  filter: blur(20px);
  opacity: .95;
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 0;
}
.miniTerminal > *{ position: relative; z-index: 1; }

/* extra pulsing bloom for mini terminal */
.miniTerminal::after{
  content: "";
  position: absolute;
  left: -6%; right: -6%; bottom: -6%; top: -6%;
  border-radius: inherit;
  background: radial-gradient(40% 30% at 50% 10%, rgba(255,182,200,.18), rgba(255,182,200,0) 35%);
  filter: blur(28px) saturate(1.05);
  opacity: .9;
  pointer-events: none;
  z-index: 0;
  animation: pulseBloom 6s ease-in-out infinite;
}

@keyframes pulseBloom{
  0%{ transform: scale(1); opacity:.78 }
  50%{ transform: scale(1.04); opacity:.95 }
  100%{ transform: scale(1); opacity:.78 }
}

/* Subtle shell bloom */
.consoleFrame::after{
  content: "";
  position: absolute;
  inset: -30px;
  background: radial-gradient(600px 220px at 50% 4%, rgba(247,179,200,.06), transparent 40%);
  filter: blur(28px);
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 760px){
  .bottomLayout{ display:flex; flex-direction:column; }
  .sidebar{ width:100%; order:2; }
  .mainArea{ order:1; }
  .sidebar .grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* --- Icon tiles --- */
.iconBtn{
  text-decoration:none;
  color: inherit;
  display:flex;
  flex-direction:column;
  gap: 10px;
  align-items:center;
  justify-content:flex-start;
  padding: 10px 10px 12px;
  border-radius: 20px;
  background:
    radial-gradient(140px 100px at 20% 10%, rgba(255,255,255,.85), rgba(255,255,255,0)),
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(245,245,250,.92));
  border: 1px solid rgba(0,0,0,.06);
  box-shadow:
    0 14px 22px rgba(0,0,0,.12),
    0 2px 0 rgba(255,255,255,.85) inset,
    0 -3px 0 rgba(0,0,0,.05) inset;
  transform-style:preserve-3d;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
  outline:none;
}
.iconBtn:hover{ filter: saturate(1.05); }
.iconBtn:active{
  transform: translateY(2px) scale(.99);
  box-shadow:
    0 8px 14px rgba(0,0,0,.10),
    0 1px 0 rgba(255,255,255,.85) inset,
    0 -2px 0 rgba(0,0,0,.05) inset;
}

.iconBtn:focus-visible{
  box-shadow:
    0 0 0 4px rgba(247,179,200,.35),
    0 14px 22px rgba(0,0,0,.12);
}

.iconFace{
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  background:
    radial-gradient(120px 90px at 25% 15%, rgba(255,255,255,.75), rgba(255,255,255,0)),
    linear-gradient(180deg, var(--tileA, rgba(247,179,200,.55)), var(--tileB, rgba(255,255,255,.92)));
  border: 1px solid rgba(0,0,0,.08);
  box-shadow:
    0 18px 26px rgba(0,0,0,.14),
    0 10px 20px rgba(247,179,200,.18) inset,
    0 2px 0 rgba(255,255,255,.80) inset;
  display:grid;
  place-items:center;
  position:relative;
}
.iconFace::after{
  content:"";
  position:absolute;
  inset: 8px 10px auto 10px;
  height: 30%;
  border-radius: 18px;
  background: radial-gradient(closest-side, rgba(255,255,255,.75), rgba(255,255,255,0));
  opacity:.9;
  pointer-events:none;
}

.iconLabel{
  text-align:center;
  font-weight:900;
  line-height:1.05;
  font-size: 14px;
}
.iconLabel .small{
  display:block;
  margin-top:4px;
  font-weight:800;
  font-size: 11px;
  color: rgba(11,11,16,.62);
}

/* multi-color svg icons */
.svgIcon{ width: 66%; height: 66%; }
.svgStroke{ stroke: rgba(11,11,16,.65); stroke-width: 3.2; stroke-linecap:round; stroke-linejoin:round; }
.svgGlow{ filter: drop-shadow(0 10px 18px rgba(0,0,0,.16)); }

/* --- page content screens --- */
.pageWrap{
  position:absolute;
  inset: 62px 16px 16px 16px;
  border-radius: 26px;
  background: rgba(255,255,255,.76);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 16px 30px rgba(0,0,0,.12);
  backdrop-filter: blur(10px);
  overflow:auto;
  padding: 16px 16px 18px;
}
.pageWrap h2{ margin:0 0 8px; font-size: 18px; font-weight:900; }
.pageWrap p{ margin:0 0 10px; color: rgba(11,11,16,.78); font-weight:700; }
.chipRow{ display:flex; flex-wrap:wrap; gap: 8px; margin: 10px 0 6px; }
.chip{
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(247,179,200,.22);
  border: 1px solid rgba(224,85,138,.25);
  font-weight:900;
  font-size: 12px;
}
.card{
  border-radius: 20px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 12px 20px rgba(0,0,0,.10);
  padding: 12px 12px 10px;
  margin: 10px 0;
}
.card h3{ margin: 0 0 6px; font-size: 15px; font-weight:900; }
.card .meta{ font-family:var(--mono); font-size: 12px; opacity:.8; }
a.link{
  color:#e0558a;
  font-weight:900;
  text-decoration:none;
}
a.link:hover{ text-decoration:underline; }

/* launch animation overlay */
.launchOverlay{
  position:fixed; inset:0;
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(6px);
  display:grid;
  place-items:center;
  z-index: 50;
  opacity:0;
  transition: opacity .22s ease;
}
.launchOverlay.show{ opacity:1; }
.launchCard{
  width: min(520px, 86vw);
  border-radius: 34px;
  padding: 18px;
  background:
    radial-gradient(220px 160px at 30% 10%, rgba(255,255,255,.90), rgba(255,255,255,0)),
    linear-gradient(180deg, rgba(247,179,200,.45), rgba(255,255,255,.92));
  border: 1px solid rgba(224,85,138,.25);
  box-shadow: 0 26px 60px rgba(0,0,0,.18);
  transform: translateY(12px) scale(.92);
  transition: transform .24s cubic-bezier(.2, .9, .2, 1);
  display:flex;
  align-items:center;
  gap: 14px;
}
.launchOverlay.show .launchCard{ transform: translateY(0) scale(1); }
.launchIcon{
  width: 74px; height: 74px;
  border-radius: 22px;
  background:
    radial-gradient(90px 70px at 20% 10%, rgba(255,255,255,.78), rgba(255,255,255,0)),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(245,245,250,.92));
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 16px 24px rgba(0,0,0,.14);
  display:grid; place-items:center;
}
.launchText h4{ margin:0; font-size: 16px; font-weight:900; }
.launchText p{ margin: 4px 0 0; opacity:.75; font-weight:800; }

@media (max-width: 760px){
  :root{ --screen-h-top: 240px; --screen-h-bottom: 420px; }
  .titleBlock{ grid-template-columns: 1fr; align-items:start; }
  .grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 640px){
  :root{
    --screen-w: 100%;
    --radius: 16px;
    --radius-lg: 22px;
  }
  .shell{
    padding: 16px 8px 26px;
    align-items:stretch;
  }
  .consoleFrame{
    width: 100%;
    border-radius: 32px;
    padding: 12px;
  }
  .ds{ gap: 12px; }
  .topScreen, .bottomScreen{
    height: auto;
    min-height: 0;
    padding: 14px 12px 16px;
    display:flex;
    flex-direction:column;
    gap: 12px;
  }
  .statusBar{
    position:static;
    margin: 0 0 4px;
    flex-direction:column;
    align-items:flex-start;
    gap: 6px;
  }
  .statusRight{ width:100%; justify-content:space-between; }
  .headerBox{
    position:static;
    inset:auto;
  }
  .titleBlock{
    position:static;
    inset:auto;
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .bottomHeader{
    position:static;
    padding: 0;
    margin-bottom: 6px;
  }
  .bottomLayout{
    position:static;
    left:auto; right:auto; top:auto; bottom:auto;
    flex-direction:column;
    gap: 10px;
  }
  .mainArea{
    padding-top: 0;
    gap: 10px;
  }
  .grid{
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    margin: 0;
  }
  .infoCard{
    min-height: 0;
    padding: 14px;
  }
  .miniTerminal{ min-height: 170px; }
  .pageWrap{
    position:static;
    inset:auto;
    padding: 14px 12px 16px;
    max-height:none;
  }
}

/* --- Fruity 3D background canvas --- */
#bg{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
}

/* --- Carousel (3DS home menu-ish) --- */
.carouselWrap{
  position:relative;
  width:100%;
  margin: 64px 0 0; /* sits inside .mainArea below its header */
  height: 150px;
  border-radius: 26px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 16px 26px rgba(0,0,0,.12);
  backdrop-filter: blur(10px);
  overflow:hidden;
}

.carouselTrack{
  height:100%;
  display:flex;
  align-items:center;
  gap: 14px;
  padding: 14px;
  overflow-x:auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.carouselTrack::-webkit-scrollbar{ display:none; }

.carouselItem{
  flex: 0 0 118px;
  height: 118px;
  scroll-snap-align: center;
  border-radius: 28px;
  background:
    radial-gradient(120px 90px at 25% 15%, rgba(255,255,255,.85), rgba(255,255,255,0)),
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(245,245,250,.92));
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 14px 22px rgba(0,0,0,.12);
  display:grid;
  place-items:center;
  transform: translateZ(0);
  transition: transform .18s ease, box-shadow .18s ease;
  position:relative;
  text-decoration:none;
  color: inherit;
  outline:none;
}

.carouselItem[aria-current="true"]{
  transform: scale(1.06);
  box-shadow: 0 20px 30px rgba(0,0,0,.16), 0 0 0 4px rgba(247,179,200,.28);
}

.carouselLabel{
  position:absolute;
  bottom: 10px;
  left: 10px; right: 10px;
  text-align:center;
  font-weight: 900;
  font-size: 12px;
  opacity: .9;
  pointer-events:none;
}

.carouselNav{
  position:absolute;
  inset: 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  pointer-events:none;
}
.carouselBtn{
  pointer-events:auto;
  width: 42px; height: 42px;
  margin: 0 10px;
  border-radius: 16px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 12px 18px rgba(0,0,0,.12);
  display:grid; place-items:center;
  cursor:pointer;
}
.carouselBtn svg{ width:18px; height:18px; opacity:.85; }

.dots{
  position:absolute;
  left:0; right:0;
  bottom: 8px;
  display:flex;
  justify-content:center;
  gap: 7px;
  pointer-events:none;
}
.dot2{
  width: 8px; height: 8px;
  border-radius: 999px;
  background: rgba(11,11,16,.18);
  box-shadow: 0 0 0 3px rgba(255,255,255,.55);
}
.dot2.on{
  background: rgba(224,85,138,.70);
  box-shadow: 0 0 0 3px rgba(247,179,200,.30);
}

/* Push grid down when carousel exists */
.grid.hasCarousel{
  margin-top: 0; /* carousel now lives in main area */
}


/* --- Outer 3DS plastic shell --- */
.consoleFrame{
  width: var(--screen-w);
  border-radius: 46px;
  padding: 18px 18px 22px;
  background:
    radial-gradient(900px 520px at 25% 10%, rgba(255,255,255,.85), rgba(255,255,255,0) 60%),
    radial-gradient(700px 500px at 80% 30%, rgba(247,179,200,.65), rgba(247,179,200,0) 65%),
    linear-gradient(180deg, rgba(247,179,200,.55), rgba(255,255,255,.88));
  border: 1px solid rgba(224,85,138,.22);
  box-shadow:
    0 30px 80px rgba(0,0,0,.18),
    0 3px 0 rgba(255,255,255,.80) inset,
    0 -4px 0 rgba(0,0,0,.06) inset;
  position:relative;
  filter: drop-shadow(0 22px 48px rgba(224,85,138,.22));
}

.consoleFrame::before{
  content:"";
  position:absolute;
  inset: 10px;
  border-radius: 40px;
  background:
    /* light sheen */
    radial-gradient(600px 400px at 20% 0%, rgba(255,255,255,.55), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.40), rgba(0,0,0,.02)),
    /* vertical synth lines */
    repeating-linear-gradient(90deg, rgba(255,214,230,0.02) 0 2px, transparent 2px 18px);
  pointer-events:none;
  opacity:.75;
}

/* animate a gentle hue/saturation shift for a synth-like glow */
.consoleFrame::before{
  animation: synthHue 14s linear infinite;
}

/* bloom aura behind the frame */
.consoleFrame::after{
  content:"";
  position:absolute;
  inset: -12% -10%;
  border-radius: 52px;
  background:
    radial-gradient(320px 260px at 24% 18%, rgba(255,255,255,.45), transparent 70%),
    radial-gradient(420px 300px at 70% 24%, var(--bloom), transparent 70%);
  filter: blur(32px);
  opacity:.6;
  z-index:-1;
  pointer-events:none;
}

@keyframes synthHue{
  0%{ filter: hue-rotate(0deg) saturate(1); }
  50%{ filter: hue-rotate(18deg) saturate(1.08); }
  100%{ filter: hue-rotate(0deg) saturate(1); }
}

.plasticLip{
  position:absolute;
  left: 26px; right: 26px;
  top: 14px;
  height: 10px;
  border-radius: 999px;
  background: rgba(11,11,16,.08);
  filter: blur(.2px);
  opacity:.6;
}

.speakers{
  position:absolute;
  top: 38px;
  left: 22px;
  display:flex;
  gap: 6px;
  opacity:.35;
}
.speakers.right{ left:auto; right:22px; }
.speakerDot{
  width: 4px; height: 4px;
  border-radius: 999px;
  background: rgba(11,11,16,.65);
}

.controls{
  position:absolute;
  left:0; right:0;
  bottom: 10px;
  display:flex;
  justify-content:space-between;
  padding: 0 30px;
  pointer-events:none;
  opacity:.8;
}
.dpad, .abxy{
  width: 110px; height: 110px;
  position:relative;
  filter: drop-shadow(0 14px 18px rgba(0,0,0,.12));
}
.pad{
  position:absolute; inset:0;
  border-radius: 32px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 18px rgba(0,0,0,.12);
  backdrop-filter: blur(10px);
}
.dpad .crossV{
  position:absolute; left:50%; top:50%;
  width: 26px; height: 70px;
  transform: translate(-50%,-50%);
  border-radius: 14px;
  background: rgba(11,11,16,.22);
}
.dpad .crossH{
  position:absolute; left:50%; top:50%;
  width: 70px; height: 26px;
  transform: translate(-50%,-50%);
  border-radius: 14px;
  background: rgba(11,11,16,.22);
}
.abxy .btn{
  position:absolute;
  width: 28px; height: 28px;
  border-radius: 999px;
  background: rgba(247,179,200,.65);
  border: 1px solid rgba(224,85,138,.25);
  box-shadow: 0 10px 14px rgba(0,0,0,.10);
}
.abxy .btn.b{ left: 20px; top: 41px; }
.abxy .btn.a{ right: 20px; top: 41px; }
.abxy .btn.x{ left: 41px; top: 20px; }
.abxy .btn.y{ left: 41px; bottom: 20px; }

/* Let 3D background peek through screens */
.screen{
  background:
    radial-gradient(260px 150px at 20% 0%, rgba(255,255,255,.58), rgba(255,255,255,0)),
    linear-gradient(180deg, rgba(255,255,255,.56), rgba(255,255,255,.36));
  backdrop-filter: blur(10px);
}

/* Add subtle scanlines on screens */
.screen > .scanlines{
  position:absolute; inset:0;
  background: repeating-linear-gradient(
    0deg,
    rgba(11,11,16,.03) 0px,
    rgba(11,11,16,.03) 1px,
    rgba(255,255,255,0) 3px,
    rgba(255,255,255,0) 6px
  );
  opacity:.18;
  pointer-events:none;
  mix-blend-mode:multiply;
}