/* "Websites Built in the Code Lab" in one container (founder 2026-10-18: "Put all this in a big ultra
   premium container ... as they are", then "Make it more beautiful and colorful").

   Contents are untouched. Everything in that section already sits inside a single
   <div class="container">, so the frame goes on that div: the heading, the counter and tools panel,
   both carousel rows, the arrows and the "Build your own website, free" button end up inside one panel
   without a line of markup or script changing.

   Specificity note: student-sites.js injects "#student-sites > .container{max-width:none;padding...}"
   into a <style> tag at runtime, which lands after this file in document order and would win a tie.
   ".section#student-sites" carries one more class than their selector, so these rules outrank it
   without needing !important. */

.section#student-sites > .container {
  position: relative;
  isolation: isolate;
  margin-inline: 24px;
  padding: 44px 30px 36px;
  /* Four coloured lights on a dark base rather than one blue wash: cyan at the top left, violet at the
     top right, pink along the bottom right, a warm gold at the bottom left. Each is weak on its own;
     together they give the panel colour from every corner without lifting the text off its dark ground. */
  background:
    radial-gradient(90% 62% at 6% 0%, rgba(34, 211, 238, .20), transparent 60%),
    radial-gradient(72% 55% at 100% 6%, rgba(139, 92, 246, .19), transparent 62%),
    radial-gradient(85% 62% at 94% 100%, rgba(244, 114, 182, .15), transparent 62%),
    radial-gradient(70% 55% at 0% 100%, rgba(251, 191, 36, .12), transparent 60%),
    linear-gradient(180deg, rgba(13, 20, 42, .96), rgba(8, 12, 26, .97));
  border: 1px solid rgba(120, 165, 255, .22);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .06) inset,
    0 46px 104px -60px rgba(139, 92, 246, .9),
    0 24px 60px -48px rgba(34, 211, 238, .7);
}

/* A lit edge along the top, now carrying all four hues. */
.section#student-sites > .container::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, transparent, #22d3ee 16%, #8b5cf6 44%, #f472b6 70%, #fbbf24 88%, transparent);
}

/* A light that travels around the border, the same device the hero's app panel and five other
   components on this site already use (@property + conic-gradient + an xor mask, so only the 1px
   edge is painted). pointer-events must stay none: this layer covers the whole panel. */
@property --ssA { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.section#student-sites > .container::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; padding: 1px;
  background: conic-gradient(from var(--ssA), transparent 0 58%, #22d3ee 70%, #8b5cf6 80%, #f472b6 88%, #fbbf24 94%, transparent 99%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  animation: ssBorder 14s linear infinite;
}
@keyframes ssBorder { to { --ssA: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .section#student-sites > .container::after { animation: none; }
}

/* The toolbar already had a panel of its own (2026-10-08: "too messy, put the texts in one container").
   Two framed boxes one inside the other read as a mistake, so inside the big container it keeps its
   shape and takes a faint colour of its own instead of a second hard frame. */
.section#student-sites > .container .ss-panel {
  background: linear-gradient(180deg, rgba(34, 211, 238, .075), rgba(139, 92, 246, .055));
  border-color: rgba(140, 170, 255, .22);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset;
}

/* The arrows pick up the same colours on hover instead of the flat accent fill. */
.section#student-sites .ss-arrow:hover,
.section#student-sites .ss-arrow:focus-visible {
  background: linear-gradient(135deg, #22d3ee, #8b5cf6);
  border-color: transparent;
  color: #fff;
}

/* Phones: the frame stays, the padding comes in so the cards keep their room. */
@media (max-width: 640px) {
  .section#student-sites > .container {
    margin-inline: 12px;
    padding: 28px 14px 24px;
  }
}