/* Reset */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: #fff0f6;
  font-family: 'Pixelify Sans', sans-serif;
  color: #333;
  padding: 20px;
  line-height: 1.4;
}

/* Header */
header h1 { font-size: 1.5em; margin-bottom: 10px; }

/* Section wrapper */
.pink-currently-wrapper {
  margin: 20px 0 40px;
}

/* Stage (1440x770 area) */
.pink-currently-stage {
  position: relative;
  width: 1440px;
  height: 770px;
  margin: 0 auto;
  background: transparent;
}

/* Box styling (larger now) */
.pink-currently-window {
  position: absolute;
  width: 400px;
  height: 300px;
  background:
    linear-gradient(90deg, var(--pink-200) 50%, #fff 50%) 0 0/24px 24px,
    linear-gradient(0deg , var(--pink-200) 50%, #fff 50%) 0 0/24px 24px;
  border: 3px solid var(--pink-700);
  border-radius: 18px;
  padding: 10px;
  font-size: 1em;
}

/* Positioning the three boxes with coordinates */

.box1 { top: 50px; left: 60px; }
.box2 { top: 50px; left: 500px; }
.box3 { top: 50px; left: 940px; }

/* Keep your original inner design */
.pink-currently-inner {
  position: relative;
  height: 100%;
  background: var(--pink-800);
  color: #fff;
  border-radius: 12px;
  padding: 10px;
  overflow: hidden;
}
.pink-currently-inner::before {
  content:"";
  position:absolute; inset:4px;
  border:2px solid #fff;
  border-radius: 8px;
  pointer-events: none;
}

/* Scroll area */
.pink-currently-scroll { height: 100%; overflow: auto; }
.pink-currently-scroll::-webkit-scrollbar { width: 14px; }
.pink-currently-scroll::-webkit-scrollbar-track {
  background:
    radial-gradient(#ff5aa8 20%, transparent 21%) 0 0/12px 12px,
    var(--pink-300);
  border-radius: 8px;
}
.pink-currently-scroll::-webkit-scrollbar-thumb {
  background: var(--pink-700);
  border: 3px solid var(--pink-300);
  border-radius: 10px;
}

/* Content layout */
.pink-currently-content {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.pink-item {
  flex: 1 1 45%;
  min-width: 120px;
}

/* Decorative elements */
.pink-rail {
  position:absolute;
  top:10px; right:10px; bottom:10px;
  width: 24px;
  border-radius: 8px;
  background:
    radial-gradient(#fff 20%, transparent 21%) 0 0/8px 8px,
    var(--pink-700);
  display:flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  padding:4px;
}
.pink-rail .rail-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #fff;
}
.pink-bottom-ribbon {
  position:absolute;
  left:10px; right:40px; bottom:10px;
  height:20px;
  border-radius: 6px;
  background:
    radial-gradient(#fff 20%, transparent 21%) 0 0/10px 10px,
    var(--pink-700);
}

/* Palette */
:root {
  --pink-200:#ffe2ee;
  --pink-300:#ffd1e7;
  --pink-700:#ff5aa8;
  --pink-800:#e94a99;
}