/* https://uiverse.io/IWhat1/loud-frog-61 — MIT */
.uv-flip{
  width: 240px;
  height: 294px;
  perspective: 900px;
}
.uv-flip .uv-flip-card{
  height: 100%;
  width: 100%;
  background-color: aliceblue;
  position: relative;
  transition: transform 1500ms;
  transform-style: preserve-3d;
  border-radius: 2rem;
}
.uv-flip.flipped > .uv-flip-card, .uv-flip.revealed > .uv-flip-card{
  cursor: pointer;
  transform: rotateY(180deg) rotateZ(180deg);
}
.uv-flip .uv-flip-front,
.uv-flip .uv-flip-back{
  height: 100%;
  width: 100%;
  border-radius: 2rem;
  position: absolute;
  box-shadow: 0 0 10px 2px rgba(50, 50, 50, 2.5);
  backface-visibility: hidden;
  color: aliceblue;
  background: linear-gradient(-135deg, 
#0703f7, #bcff04);
}
.uv-flip .uv-flip-front,
.uv-flip .uv-flip-back{
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.uv-flip .uv-flip-back{
  transform: rotateY(180deg) rotateZ(180deg);
}
.uv-flip .back-heading,
.uv-flip .front-heading{
  font-size: 28px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-weight: bold;
}

/* https://uiverse.io/whoisyourdeadie/happy-mouse-60 — MIT */
.uv-countdown .container{
  height: 200px;
  position: relative;
  text-align: center;
  display: flex;
  gap: 20px;
}
.uv-countdown .nums{
  box-shadow:
    0 1px 2px rgba(42, 42, 42, 0.2),
    0 2px 4px rgba(42, 42, 42, 0.2),
    0 4px 8px rgba(42, 42, 42, 0.2),
    0 8px 16px rgba(42, 42, 42, 0.2),
    0 16px 32px rgba(42, 42, 42, 0.2);
  display: inline-block;
  height: 200px;
  perspective: 1000px;
  position: relative;
  width: 140px;
  border-radius: 5px 5px 5px 5px;
}
.uv-countdown .nums:before{
  border-bottom: 2px solid black;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  transform: translate3d(0, -1px, 0);
  top: 50%;
  width: 100%;
  z-index: 1000;
}
.uv-countdown .nums:after{
  backface-visibility: hidden;
  background: #2a2a2a;
  border-radius: 0 0 5px 5px;
  bottom: 0;
  box-shadow: inset 0 15px 50px #202020;
  color: #eeeeee;
  content: "0";
  display: block;
  font-size: 145px;
  height: calc(50% - 1px);
  left: 0;
  line-height: 0;
  overflow: hidden;
  position: absolute;
  text-align: center;
  text-shadow: 0 1px 2px #333;
  width: 100%;
  z-index: 0;
}
.uv-countdown .num{
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in;
  border-radius: 5px;
  font-size: 145px;
  height: 100%;
  left: 0;
  position: absolute;
  transform: rotateX(0);
  transition: 0.6s;
  transform-style: preserve-3d;
  top: 0;
  width: 100%;
}
.uv-countdown .num:before,
.uv-countdown .num:after{
  backface-visibility: hidden;
  color: #eeeeee;
  display: block;
  height: 50%;
  left: 0;
  overflow: hidden;
  position: absolute;
  text-align: center;
  text-shadow: 0 1px 2px #333;
  width: 100%;
}
.uv-countdown .num:before{
  background: #181818;
  border-radius: 5px 5px 0 0;
  box-shadow: inset 0 15px 50px #111111;
  content: attr(data-num);
  line-height: 1.38;
  top: 0;
  z-index: 1;
}
.uv-countdown .num:after{
  background: #2a2a2a;
  border-bottom: 1px solid #444444;
  border-radius: 0 0 5px 5px;
  box-shadow: inset 0 15px 50px #202020;
  content: attr(data-num-next);
  height: calc(50% - 1px);
  line-height: 0;
  top: 0;
  transform: rotateX(180deg);
}
.uv-countdown .nums-one .num:nth-of-type(1){
  animation: uva-countdown-num-one 10s infinite ease-in;
  animation-delay: 0s;
  z-index: 10;
}
.uv-countdown .nums-one .num:nth-of-type(2){
  animation: uva-countdown-num-one 10s infinite ease-in;
  animation-delay: 1s;
  z-index: 9;
}
.uv-countdown .nums-one .num:nth-of-type(3){
  animation: uva-countdown-num-one 10s infinite ease-in;
  animation-delay: 2s;
  z-index: 8;
}
.uv-countdown .nums-one .num:nth-of-type(4){
  animation: uva-countdown-num-one 10s infinite ease-in;
  animation-delay: 3s;
  z-index: 7;
}
.uv-countdown .nums-one .num:nth-of-type(5){
  animation: uva-countdown-num-one 10s infinite ease-in;
  animation-delay: 4s;
  z-index: 6;
}
.uv-countdown .nums-one .num:nth-of-type(6){
  animation: uva-countdown-num-one 10s infinite ease-in;
  animation-delay: 5s;
  z-index: 5;
}
.uv-countdown .nums-one .num:nth-of-type(7){
  animation: uva-countdown-num-one 10s infinite ease-in;
  animation-delay: 6s;
  z-index: 4;
}
.uv-countdown .nums-one .num:nth-of-type(8){
  animation: uva-countdown-num-one 10s infinite ease-in;
  animation-delay: 7s;
  z-index: 3;
}
.uv-countdown .nums-one .num:nth-of-type(9){
  animation: uva-countdown-num-one 10s infinite ease-in;
  animation-delay: 8s;
  z-index: 2;
}
.uv-countdown .nums-one .num:nth-of-type(10){
  animation: uva-countdown-num-one 10s infinite ease-in;
  animation-delay: 9s;
  z-index: 1;
}
.uv-countdown .nums-ten .num:nth-of-type(1){
  animation: uva-countdown-num-ten 100s infinite ease-in;
  animation-delay: 9s;
  z-index: 10;
}
.uv-countdown .nums-ten .num:nth-of-type(2){
  animation: uva-countdown-num-ten 100s infinite ease-in;
  animation-delay: 19s;
  z-index: 9;
}
.uv-countdown .nums-ten .num:nth-of-type(3){
  animation: uva-countdown-num-ten 100s infinite ease-in;
  animation-delay: 29s;
  z-index: 8;
}
.uv-countdown .nums-ten .num:nth-of-type(4){
  animation: uva-countdown-num-ten 100s infinite ease-in;
  animation-delay: 39s;
  z-index: 7;
}
.uv-countdown .nums-ten .num:nth-of-type(5){
  animation: uva-countdown-num-ten 100s infinite ease-in;
  animation-delay: 49s;
  z-index: 6;
}
.uv-countdown .nums-ten .num:nth-of-type(6){
  animation: uva-countdown-num-ten 100s infinite ease-in;
  animation-delay: 59s;
  z-index: 5;
}
.uv-countdown .nums-ten .num:nth-of-type(7){
  animation: uva-countdown-num-ten 100s infinite ease-in;
  animation-delay: 69s;
  z-index: 4;
}
.uv-countdown .nums-ten .num:nth-of-type(8){
  animation: uva-countdown-num-ten 100s infinite ease-in;
  animation-delay: 79s;
  z-index: 3;
}
.uv-countdown .nums-ten .num:nth-of-type(9){
  animation: uva-countdown-num-ten 100s infinite ease-in;
  animation-delay: 89s;
  z-index: 2;
}
.uv-countdown .nums-ten .num:nth-of-type(10){
  animation: uva-countdown-num-ten 100s infinite ease-in;
  animation-delay: 99s;
  z-index: 1;
}
@keyframes uva-countdown-num-one{
  0% {
    transform: rotateX(0);
    z-index: 50;
  }
  10% {
    transform: rotateX(-180deg);
    z-index: 50;
  }
  90% {
    transform: rotateX(-180deg);
    z-index: 1;
  }
  90.0001% {
    transform: rotateX(0);
  }
  100% {
    transform: rotateX(0);
  }
}
@keyframes uva-countdown-num-ten{
  0% {
    transform: rotateX(0);
    z-index: 50;
  }
  1% {
    transform: rotateX(-180deg);
    z-index: 50;
  }
  90% {
    transform: rotateX(-180deg);
    z-index: 1;
  }
  90.0001% {
    transform: rotateX(0);
  }
  100% {
    transform: rotateX(0);
  }
}

/* https://uiverse.io/Ratinax/selfish-lizard-95 — MIT */
.uv-pacman .loader{
  display: flex;
  justify-content: space-between;
}
.uv-pacman .pac-man{
  width: 5em;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(farthest-side,#000 98%,#0000) 1.7em 0.61em/.8em .8em no-repeat,  
    #ffcc00;
  box-shadow: .2em -.6em 1.2em 0em inset rgba(0, 0, 0, 0.7);
  animation: uva-pacman-l4 .5s infinite steps(5) alternate;
  z-index: 999;
}
.uv-pacman .point{
  margin-top: 2em;
  position: absolute;
  margin-left: .4em;
  width: 1em;
  height: 1em;
  background-color: #000;
  border-radius: 50%;
}
.uv-pacman .p1{
  margin-left: 8em;
  animation: uva-pacman-moove-p1 2s linear infinite;
}
.uv-pacman .p2{
  margin-left: 15em;
  animation: uva-pacman-moove-p2 2s linear infinite;
}
@keyframes uva-pacman-moove-p1{
  0% {
    margin-left: 8em;
  }

  100% {
    margin-left: 0em;
  }
}
@keyframes uva-pacman-moove-p2{
  0% {
    margin-left: 16em;
  }

  100% {
    margin-left: 8em;
  }
}
@keyframes uva-pacman-l4{
 
  0% {
    clip-path: polygon(50% 50%,100% 0,100% 0,0 0,0 100%,100% 100%,100% 100%)
  }

  100% {
    clip-path: polygon(50% 50%,100% 65%,100% 0,0 0,0 100%,100% 100%,100%  35%)
  }
}

/* https://uiverse.io/vinodjangid07/polite-rat-20 — MIT */
.uv-pan .loader{
  display: flex;
  align-items: center;
  justify-content: center;
}
.uv-pan .panWrapper{
  width: 200px;
  height: fit-content;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  flex-direction: column;
  gap: 20px;
}
.uv-pan .pan{
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  height: fit-content;
  animation: uva-pan-cooking 1.7s infinite;
}
@keyframes uva-pan-cooking{
  0% {
    transform: rotate(0deg);
    transform-origin: top right;
  }
  10% {
    transform: rotate(-4deg);
    transform-origin: top right;
  }
  50% {
    transform: rotate(20deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.uv-pan .food{
  position: absolute;
  width: 40%;
  height: 6px;
  background: linear-gradient(to bottom, rgb(82, 33, 33), rgb(200, 106, 106));
  left: 10px;
  border-radius: 50%;
  animation: uva-pan-flip 1.7s infinite;
  z-index: 2;
}
@keyframes uva-pan-flip{
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-100px) rotate(180deg);
  }
  100% {
    transform: translateY(0px) rotate(360deg);
  }
}
.uv-pan .panBase{
  z-index: 3;
  width: 50%;
  height: 22px;
  border-bottom-left-radius: 40px;
  border-bottom-right-radius: 40px;
  background: linear-gradient(to top, rgb(3, 156, 156), rgb(10, 191, 191));
}
.uv-pan .panHandle{
  width: 40%;
  background: linear-gradient(to bottom, rgb(18, 18, 18), rgb(74, 74, 74));
  height: 10px;
  border-radius: 10px;
}
.uv-pan .panShadow{
  width: 70px;
  height: 8px;
  background-color: rgba(0, 0, 0, 0.21);
  margin-left: 15px;
  border-radius: 10px;
  animation: uva-pan-shadow 1.7s infinite;
  filter: blur(5px);
}
@keyframes uva-pan-shadow{
  0% {
    transform: scaleX(0.7);
  }
  50% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0.7);
  }
}

/* https://uiverse.io/Ashon-G/clever-bullfrog-59 — MIT */
.uv-laptop .macbook{
  width: 150px;
  height: 96px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -85px 0 0 -78px;
  perspective: 500px;
}
.uv-laptop .uva-laptop-shadow{
  position: absolute;
  width: 60px;
  height: 0px;
  left: 40px;
  top: 160px;
  transform: rotateX(80deg) rotateY(0deg) rotateZ(0deg);
  box-shadow: 0 0 60px 40px rgba(0,0,0,0.3);
  animation: uva-laptop-shadow infinite 7s ease;
}
.uv-laptop .inner{
  z-index: 20;
  position: absolute;
  width: 150px;
  height: 96px;
  left: 0;
  top: 0;
  transform-style: preserve-3d;
  transform: rotateX(-20deg) rotateY(0deg) rotateZ(0deg);
  animation: uva-laptop-rotate infinite 7s ease;
}
.uv-laptop .uv-laptop-screen{
  width: 150px;
  height: 96px;
  position: absolute;
  left: 0;
  bottom: 0;
  border-radius: 7px;
  background: #ddd;
  transform-style: preserve-3d;
  transform-origin: 50% 93px;
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  animation: uva-laptop-lid-screen infinite 7s ease;
  background-image: linear-gradient(45deg, rgba(0,0,0,0.34) 0%,rgba(0,0,0,0) 100%);
  background-position: left bottom;
  background-size: 300px 300px;
  box-shadow: inset 0 3px 7px rgba(255,255,255,0.5);
}
.uv-laptop .uv-laptop-screen .logo{
  position: absolute;
  width: 20px;
  height: 24px;
  left: 50%;
  top: 50%;
  margin: -12px 0 0 -10px;
  transform: rotateY(180deg) translateZ(0.1px);
}
.uv-laptop .uv-laptop-screen .face-one{
  width: 150px;
  height: 96px;
  position: absolute;
  left: 0;
  bottom: 0;
  border-radius: 7px;
  background: #d3d3d3;
  transform: translateZ(2px);
  background-image: linear-gradient(45deg,rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);
}
.uv-laptop .uv-laptop-screen .face-one .camera{
  width: 3px;
  height: 3px;
  border-radius: 100%;
  background: #000;
  position: absolute;
  left: 50%;
  top: 4px;
  margin-left: -1.5px;
}
.uv-laptop .uv-laptop-screen .face-one .display{
  width: 130px;
  height: 74px;
  margin: 10px;
  background-color: #000;
  background-size: 100% 100%;
  border-radius: 1px;
  position: relative;
  box-shadow: inset 0 0 2px rgba(0,0,0,1);
}
.uv-laptop .uv-laptop-screen .face-one .display .shade{
  position: absolute;
  left: 0;
  top: 0;
  width: 130px;
  height: 74px;
  background: linear-gradient(-135deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0.1) 47%,rgba(255,255,255,0) 48%);
  animation: uva-laptop-screen-shade infinite 7s ease;
  background-size: 300px 200px;
  background-position: 0px 0px;
}
.uv-laptop .uv-laptop-screen .face-one span{
  position: absolute;
  top: 85px;
  left: 57px;
  font-size: 6px;
  color: #666
}
.uv-laptop .macbody{
  width: 150px;
  height: 96px;
  position: absolute;
  left: 0;
  bottom: 0;
  border-radius: 7px;
  background: #cbcbcb;
  transform-style: preserve-3d;
  transform-origin: 50% bottom;
  transform: rotateX(-90deg);
  animation: uva-laptop-lid-macbody infinite 7s ease;
  background-image: linear-gradient(45deg, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);
}
.uv-laptop .macbody .face-one{
  width: 150px;
  height: 96px;
  position: absolute;
  left: 0;
  bottom: 0;
  border-radius: 7px;
  transform-style: preserve-3d;
  background: #dfdfdf;
  animation: uva-laptop-lid-keyboard-area infinite 7s ease;
  transform: translateZ(-2px);
  background-image: linear-gradient(30deg, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);
}
.uv-laptop .macbody .touchpad{
  width: 40px;
  height: 31px;
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 4px;
  margin: -44px 0 0 -18px;
  background: #cdcdcd;
  background-image: linear-gradient(30deg, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);
  box-shadow: inset 0 0 3px #888;
}
.uv-laptop .macbody .keyboard{
  width: 130px;
  height: 45px;
  position: absolute;
  left: 7px;
  top: 41px;
  border-radius: 4px;
  transform-style: preserve-3d;
  background: #cdcdcd;
  background-image: linear-gradient(30deg, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);
  box-shadow: inset 0 0 3px #777;
  padding: 0 0 0 2px;
}
.uv-laptop .keyboard .key{
  width: 6px;
  height: 6px;
  background: #444;
  float: left;
  margin: 1px;
  transform: translateZ(-2px);
  border-radius: 2px;
  box-shadow: 0 -2px 0 #222;
  animation: uva-laptop-keys infinite 7s ease;
}
.uv-laptop .key.space{
  width: 45px;
}
.uv-laptop .key.f{
  height: 3px;
}
.uv-laptop .macbody .pad{
  width: 5px;
  height: 5px;
  background: #333;
  border-radius: 100%;
  position: absolute;
}
.uv-laptop .pad.one{
  left: 20px;
  top: 20px;
}
.uv-laptop .pad.two{
  right: 20px;
  top: 20px;
}
.uv-laptop .pad.three{
  right: 20px;
  bottom: 20px;
}
.uv-laptop .pad.four{
  left: 20px;
  bottom: 20px;
}
@keyframes uva-laptop-rotate{
  0% {
    transform: rotateX(-20deg) rotateY(0deg) rotateZ(0deg);
  }

  5% {
    transform: rotateX(-20deg) rotateY(-20deg) rotateZ(0deg);
  }

  20% {
    transform: rotateX(30deg) rotateY(200deg) rotateZ(0deg);
  }

  25% {
    transform: rotateX(-60deg) rotateY(150deg) rotateZ(0deg);
  }

  60% {
    transform: rotateX(-20deg) rotateY(130deg) rotateZ(0deg);
  }

  65% {
    transform: rotateX(-20deg) rotateY(120deg) rotateZ(0deg);
  }

  80% {
    transform: rotateX(-20deg) rotateY(375deg) rotateZ(0deg);
  }

  85% {
    transform: rotateX(-20deg) rotateY(357deg) rotateZ(0deg);
  }

  87% {
    transform: rotateX(-20deg) rotateY(360deg) rotateZ(0deg);
  }

  100% {
    transform: rotateX(-20deg) rotateY(360deg) rotateZ(0deg);
  }
}
@keyframes uva-laptop-lid-screen{
  0% {
    transform: rotateX(0deg);
    background-position: left bottom;
  }

  5% {
    transform: rotateX(50deg);
    background-position: left bottom;
  }

  20% {
    transform: rotateX(-90deg);
    background-position: -150px top;
  }

  25% {
    transform: rotateX(15deg);
    background-position: left bottom;
  }

  30% {
    transform: rotateX(-5deg);
    background-position: right top;
  }

  38% {
    transform: rotateX(5deg);
    background-position: right top;
  }

  48% {
    transform: rotateX(0deg);
    background-position: right top;
  }

  90% {
    transform: rotateX(0deg);
    background-position: right top;
  }

  100% {
    transform: rotateX(0deg);
    background-position: right center;
  }
}
@keyframes uva-laptop-lid-macbody{
  0% {
    transform: rotateX(-90deg);
  }

  50% {
    transform: rotateX(-90deg);
  }

  100% {
    transform: rotateX(-90deg);
  }
}
@keyframes uva-laptop-lid-keyboard-area{
  0% {
    background-color: #dfdfdf;
  }

  50% {
    background-color: #bbb;
  }

  100% {
    background-color: #dfdfdf;
  }
}
@keyframes uva-laptop-screen-shade{
  0% {
    background-position: -20px 0px;
  }

  5% {
    background-position: -40px 0px;
  }

  20% {
    background-position: 200px 0;
  }

  50% {
    background-position: -200px 0;
  }

  80% {
    background-position: 0px 0px;
  }

  85% {
    background-position: -30px 0;
  }

  90% {
    background-position: -20px 0;
  }

  100% {
    background-position: -20px 0px;
  }
}
@keyframes uva-laptop-keys{
  0% {
    box-shadow: 0 -2px 0 #222;
  }

  5% {
    box-shadow: 1 -1px 0 #222;
  }

  20% {
    box-shadow: -1px 1px 0 #222;
  }

  25% {
    box-shadow: -1px 1px 0 #222;
  }

  60% {
    box-shadow: -1px 1px 0 #222;
  }

  80% {
    box-shadow: 0 -2px 0 #222;
  }

  85% {
    box-shadow: 0 -2px 0 #222;
  }

  87% {
    box-shadow: 0 -2px 0 #222;
  }

  100% {
    box-shadow: 0 -2px 0 #222;
  }
}
@keyframes uva-laptop-shadow{
  0% {
    transform: rotateX(80deg) rotateY(0deg) rotateZ(0deg);
    box-shadow: 0 0 60px 40px rgba(0,0,0,0.3);
  }

  5% {
    transform: rotateX(80deg) rotateY(10deg) rotateZ(0deg);
    box-shadow: 0 0 60px 40px rgba(0,0,0,0.3);
  }

  20% {
    transform: rotateX(30deg) rotateY(-20deg) rotateZ(-20deg);
    box-shadow: 0 0 50px 30px rgba(0,0,0,0.3);
  }

  25% {
    transform: rotateX(80deg) rotateY(-20deg) rotateZ(50deg);
    box-shadow: 0 0 35px 15px rgba(0,0,0,0.1);
  }

  60% {
    transform: rotateX(80deg) rotateY(0deg) rotateZ(-50deg) translateX(30px);
    box-shadow: 0 0 60px 40px rgba(0,0,0,0.3);
  }

  100% {
    box-shadow: 0 0 60px 40px rgba(0,0,0,0.3);
  }
}

/* https://uiverse.io/JoseIsra/white-pug-89 — MIT */
.uv-bluecard .card{
  width: 12rem;
  cursor: pointer;
}
.uv-bluecard .content{
  text-align: center;
  position: relative;
  transition: all 2.25s;
  background-color: rgb(127, 204, 240);
  padding: 5em;
  transform-style: preserve-3d;
}
.uv-bluecard .card:hover .content{
  transform: rotateY(0.5turn);
}
.uv-bluecard .front,
.uv-bluecard .back{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 2em;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
.uv-bluecard .title{
  transform: translateZ(5rem);
  font-size: 2rem;
}
.uv-bluecard .subtitle{
  transform: translateZ(2rem);
}
.uv-bluecard .back{
  transform: rotateY(0.5turn);
  background-color: #009bff;
}
.uv-bluecard .description{
  transform: translateZ(3rem);
}

/* https://uiverse.io/0xnihilism/calm-baboon-55 — MIT */
.uv-entry .brutalist-container{
  position: relative;
  width: 250px;
  font-family: monospace;
}
.uv-entry .brutalist-input{
  width: 100%;
  padding: 15px;
  font-size: 18px;
  font-weight: bold;
  color: #000;
  background-color: #fff;
  border: 4px solid #000;
  position: relative;
  overflow: hidden;
  border-radius: 0;
  outline: none;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 5px 5px 0 #000, 10px 10px 0 #4a90e2;
}
@keyframes uva-entry-glitch{
  0% {
    transform: translate(0);
  }
  20% {
    transform: translate(-2px, 2px);
  }
  40% {
    transform: translate(-2px, -2px);
  }
  60% {
    transform: translate(2px, 2px);
  }
  80% {
    transform: translate(2px, -2px);
  }
  100% {
    transform: translate(0);
  }
}
.uv-entry .brutalist-input:focus{
  animation: uva-entry-focus-pulse 4s cubic-bezier(0.25, 0.8, 0.25, 1) infinite,
    uva-entry-glitch 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) infinite;
}
.uv-entry .brutalist-input:focus::after{
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: white;
  z-index: -1;
}
.uv-entry .brutalist-input:focus::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  z-index: -2;
  clip-path: inset(0 100% 0 0);
  animation: uva-entry-glitch-slice 4s steps(2, end) infinite;
}
@keyframes uva-entry-glitch-slice{
  0% {
    clip-path: inset(0 100% 0 0);
  }
  10% {
    clip-path: inset(0 5% 0 0);
  }
  20% {
    clip-path: inset(0 80% 0 0);
  }
  30% {
    clip-path: inset(0 10% 0 0);
  }
  40% {
    clip-path: inset(0 50% 0 0);
  }
  50% {
    clip-path: inset(0 30% 0 0);
  }
  60% {
    clip-path: inset(0 70% 0 0);
  }
  70% {
    clip-path: inset(0 15% 0 0);
  }
  80% {
    clip-path: inset(0 90% 0 0);
  }
  90% {
    clip-path: inset(0 5% 0 0);
  }
  100% {
    clip-path: inset(0 100% 0 0);
  }
}
.uv-entry .brutalist-label{
  position: absolute;
  left: -3px;
  top: -35px;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  background-color: #000;
  padding: 5px 10px;
  transform: rotate(-1deg);
  z-index: 1;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.uv-entry .brutalist-input:focus + .brutalist-label{
  transform: rotate(0deg) scale(1.05);
  background-color: #4a90e2;
}
.uv-entry .smooth-type{
  position: relative;
  overflow: hidden;
}
.uv-entry .smooth-type::before{
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.uv-entry .smooth-type:focus::before{
  opacity: 1;
  animation: uva-entry-type-gradient 2s linear infinite;
}
@keyframes uva-entry-type-gradient{
  0% {
    background-position: 300px 0;
  }
  100% {
    background-position: 0 0;
  }
}
.uv-entry .brutalist-input::placeholder{
  color: #888;
  transition: color 0.3s ease;
}
.uv-entry .brutalist-input:focus::placeholder{
  color: transparent;
}
.uv-entry .brutalist-input:focus{
  animation: uva-entry-focus-pulse 4s cubic-bezier(0.25, 0.8, 0.25, 1) infinite;
}
@keyframes uva-entry-focus-pulse{
  0%,
  100% {
    border-color: #000;
  }
  50% {
    border-color: #4a90e2;
  }
}

/* https://uiverse.io/Ashon-G/rotten-frog-52 — MIT */
.uv-game-button .neo-pop-tilted-button{
  border: 0.1px;
  padding-bottom: 6px;
  box-shadow: 1px 5px 7px #494a4b;
  position: relative;
  overflow: hidden;
  background-color: #b7a81d;
  color: #000000;
  font-size: 1.25rem;
  font-weight: 600;
  cursor: pointer;
  transform: perspective(180px) rotateX(30deg) translateY(2px);
  transition: transform 0.3s ease, background-color 0.3s ease;
}
.uv-game-button .neo-pop-tilted-button::before{
  content: "";
  position: absolute;
  top: 0;
  left: 60%;
  width: 35%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(196, 196, 196, 0.8) 5px,
    rgba(196, 196, 196, 0) 5px,
    rgba(196, 196, 196, 0) 10px,
    rgba(196, 196, 196, 0.8) 2px
  );
  animation: uva-game-button-shimmer 5.5s infinite linear;
}
.uv-game-button .neo-pop-tilted-button span::before{
  content: "";
  position: absolute;
  top: 0;
  left: 60%;
  width: 35%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 1) 5px,
    rgba(255, 255, 255, 0) 5px,
    rgba(255, 255, 255, 0) 10px,
    rgba(255, 255, 255, 1) 2px
  );
  animation: uva-game-button-shimmer 5.5s infinite linear;
}
@keyframes uva-game-button-shimmer{
  0% {
    transform: translateX(-1950%);
  }
  100% {
    transform: translateX(100%);
  }
}
.uv-game-button .neo-pop-tilted-button span{
  background: #ffeb34;
  padding: 1rem 2.5rem;
  position: relative;
  z-index: 1;
  display: block;
  border-radius: 0px;
  border: 1px solid #494a4b;
}
.uv-game-button .neo-pop-tilted-button:focus{
  outline: none;
}
.uv-game-button .neo-pop-tilted-button:focus-visible{
  box-shadow: 0 0 0 3px rgba(255, 235, 52, 0.5);
}
.uv-game-button button:active{
  transform: perspective(170px) rotateX(36deg) translateY(5px);
}

/* https://uiverse.io/dopekid_9309/afraid-snail-61 — MIT */
.uv-comic .comic-brutalist-loader{
  --primary-color: #ff3c41;
  --secondary-color: #0055ff;
  --bg-color: #ffeb3b;
  --text-color: #000;
  --border-width: 0.25em;

  font-family: Arial, sans-serif;
  width: 20em;
  height: 20em;
  position: relative;
  margin: 2em auto;
}
.uv-comic .loader-container{
  width: 100%;
  height: 100%;
  position: relative;
  transform: uva-comic-rotate(-3deg);
}
.uv-comic .comic-panel{
  width: 100%;
  height: 100%;
  background-color: white;
  border: var(--border-width) solid black;
  box-shadow: 0.5em 0.5em 0 black;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.uv-comic .comic-panel::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  opacity: 0.3;
  z-index: 0;
  box-shadow:
    1em 1em 0 0.1em var(--bg-color),
    3em 1em 0 0.1em var(--bg-color),
    5em 1em 0 0.1em var(--bg-color),
    7em 1em 0 0.1em var(--bg-color),
    9em 1em 0 0.1em var(--bg-color),
    11em 1em 0 0.1em var(--bg-color),
    13em 1em 0 0.1em var(--bg-color),
    15em 1em 0 0.1em var(--bg-color),
    17em 1em 0 0.1em var(--bg-color),
    19em 1em 0 0.1em var(--bg-color),
    1em 3em 0 0.1em var(--bg-color),
    3em 3em 0 0.1em var(--bg-color),
    5em 3em 0 0.1em var(--bg-color),
    7em 3em 0 0.1em var(--bg-color),
    9em 3em 0 0.1em var(--bg-color),
    11em 3em 0 0.1em var(--bg-color),
    13em 3em 0 0.1em var(--bg-color),
    15em 3em 0 0.1em var(--bg-color),
    17em 3em 0 0.1em var(--bg-color),
    19em 3em 0 0.1em var(--bg-color),
    1em 5em 0 0.1em var(--bg-color),
    3em 5em 0 0.1em var(--bg-color),
    5em 5em 0 0.1em var(--bg-color),
    7em 5em 0 0.1em var(--bg-color),
    9em 5em 0 0.1em var(--bg-color),
    11em 5em 0 0.1em var(--bg-color),
    13em 5em 0 0.1em var(--bg-color),
    15em 5em 0 0.1em var(--bg-color),
    17em 5em 0 0.1em var(--bg-color),
    19em 5em 0 0.1em var(--bg-color),
    1em 7em 0 0.1em var(--bg-color),
    3em 7em 0 0.1em var(--bg-color),
    5em 7em 0 0.1em var(--bg-color),
    7em 7em 0 0.1em var(--bg-color),
    9em 7em 0 0.1em var(--bg-color),
    11em 7em 0 0.1em var(--bg-color),
    13em 7em 0 0.1em var(--bg-color),
    15em 7em 0 0.1em var(--bg-color),
    17em 7em 0 0.1em var(--bg-color),
    19em 7em 0 0.1em var(--bg-color),
    1em 9em 0 0.1em var(--bg-color),
    3em 9em 0 0.1em var(--bg-color),
    5em 9em 0 0.1em var(--bg-color),
    7em 9em 0 0.1em var(--bg-color),
    9em 9em 0 0.1em var(--bg-color),
    11em 9em 0 0.1em var(--bg-color),
    13em 9em 0 0.1em var(--bg-color),
    15em 9em 0 0.1em var(--bg-color),
    17em 9em 0 0.1em var(--bg-color),
    19em 9em 0 0.1em var(--bg-color),
    1em 11em 0 0.1em var(--bg-color),
    3em 11em 0 0.1em var(--bg-color),
    5em 11em 0 0.1em var(--bg-color),
    7em 11em 0 0.1em var(--bg-color),
    9em 11em 0 0.1em var(--bg-color),
    11em 11em 0 0.1em var(--bg-color),
    13em 11em 0 0.1em var(--bg-color),
    15em 11em 0 0.1em var(--bg-color),
    17em 11em 0 0.1em var(--bg-color),
    19em 11em 0 0.1em var(--bg-color),
    1em 13em 0 0.1em var(--bg-color),
    3em 13em 0 0.1em var(--bg-color),
    5em 13em 0 0.1em var(--bg-color),
    7em 13em 0 0.1em var(--bg-color),
    9em 13em 0 0.1em var(--bg-color),
    11em 13em 0 0.1em var(--bg-color),
    13em 13em 0 0.1em var(--bg-color),
    15em 13em 0 0.1em var(--bg-color),
    17em 13em 0 0.1em var(--bg-color),
    19em 13em 0 0.1em var(--bg-color),
    1em 15em 0 0.1em var(--bg-color),
    3em 15em 0 0.1em var(--bg-color),
    5em 15em 0 0.1em var(--bg-color),
    7em 15em 0 0.1em var(--bg-color),
    9em 15em 0 0.1em var(--bg-color),
    11em 15em 0 0.1em var(--bg-color),
    13em 15em 0 0.1em var(--bg-color),
    15em 15em 0 0.1em var(--bg-color),
    17em 15em 0 0.1em var(--bg-color),
    19em 15em 0 0.1em var(--bg-color),
    1em 17em 0 0.1em var(--bg-color),
    3em 17em 0 0.1em var(--bg-color),
    5em 17em 0 0.1em var(--bg-color),
    7em 17em 0 0.1em var(--bg-color),
    9em 17em 0 0.1em var(--bg-color),
    11em 17em 0 0.1em var(--bg-color),
    13em 17em 0 0.1em var(--bg-color),
    15em 17em 0 0.1em var(--bg-color),
    17em 17em 0 0.1em var(--bg-color),
    19em 17em 0 0.1em var(--bg-color),
    1em 19em 0 0.1em var(--bg-color),
    3em 19em 0 0.1em var(--bg-color),
    5em 19em 0 0.1em var(--bg-color),
    7em 19em 0 0.1em var(--bg-color),
    9em 19em 0 0.1em var(--bg-color),
    11em 19em 0 0.1em var(--bg-color),
    13em 19em 0 0.1em var(--bg-color),
    15em 19em 0 0.1em var(--bg-color),
    17em 19em 0 0.1em var(--bg-color),
    19em 19em 0 0.1em var(--bg-color);
}
.uv-comic .comic-character{
  position: absolute;
  bottom: 3em;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  animation: uva-comic-bounce 0.8s infinite alternate ease-in-out;
}
.uv-comic .character-head{
  width: 6em;
  height: 6em;
  background-color: var(--primary-color);
  border: var(--border-width) solid black;
  border-radius: 50%;
  position: relative;
}
.uv-comic .character-body{
  width: 3em;
  height: 2em;
  background-color: var(--primary-color);
  border: var(--border-width) solid black;
  margin: -0.5em auto 0;
  border-radius: 0 0 1em 1em;
}
.uv-comic .character-eyes{
  position: absolute;
  top: 2em;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
}
.uv-comic .eye{
  width: 1.5em;
  height: 1.5em;
  background: white;
  border: var(--border-width) solid black;
  border-radius: 50%;
  position: relative;
  animation: uva-comic-blink 2s infinite;
}
.uv-comic .eye::after{
  content: "";
  position: absolute;
  width: 0.6em;
  height: 0.6em;
  background: black;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: uva-comic-look 3s infinite;
}
.uv-comic .character-mouth{
  position: absolute;
  bottom: 1em;
  left: 50%;
  transform: translateX(-50%);
  width: 2em;
  height: 0.5em;
  background: black;
  border-radius: 0.25em;
  animation: uva-comic-mouth 1.5s infinite;
}
.uv-comic .speech-bubble{
  position: absolute;
  top: 2em;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  border: var(--border-width) solid black;
  border-radius: 1em;
  padding: 0.8em 1.5em;
  display: flex;
  align-items: center;
  z-index: 3;
  min-width: 10em;
}
.uv-comic .speech-bubble::after{
  content: "";
  position: absolute;
  bottom: -1.5em;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 1em solid transparent;
  border-right: 1em solid transparent;
  border-top: 1.5em solid black;
  z-index: -1;
}
.uv-comic .speech-bubble::before{
  content: "";
  position: absolute;
  bottom: -1.2em;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 0.8em solid transparent;
  border-right: 0.8em solid transparent;
  border-top: 1.2em solid white;
  z-index: 1;
}
.uv-comic .loading-text{
  font-size: 1.5em;
  font-weight: bold;
  color: var(--text-color);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: Arial, sans-serif;
}
.uv-comic .dots{
  display: flex;
  margin-left: 0.5em;
}
.uv-comic .dot{
  font-size: 1.5em;
  font-weight: bold;
  color: var(--secondary-color);
  margin-left: 0.2em;
  animation: uva-comic-pulseDot 0.6s infinite alternate;
}
.uv-comic .dot:nth-child(2){
  animation-delay: 0.2s;
  color: var(--primary-color);
}
.uv-comic .dot:nth-child(3){
  animation-delay: 0.4s;
  color: var(--secondary-color);
}
.uv-comic .starburst{
  position: absolute;
  width: 8em;
  height: 8em;
  top: 60%;
  right: 2em;
  z-index: 1;
  transform: uva-comic-rotate(0deg);
  animation: uva-comic-rotate 8s linear infinite;
}
.uv-comic .star-spike{
  position: absolute;
  width: 8em;
  height: 2em;
  background: var(--secondary-color);
  top: 3em;
  left: 0;
  transform-origin: center;
}
.uv-comic .star-spike:nth-child(2){
  transform: uva-comic-rotate(45deg);
}
.uv-comic .star-spike:nth-child(3){
  transform: uva-comic-rotate(90deg);
}
.uv-comic .star-spike:nth-child(4){
  transform: uva-comic-rotate(135deg);
}
.uv-comic .star-spike:nth-child(5){
  transform: uva-comic-rotate(180deg);
}
.uv-comic .star-spike:nth-child(6){
  transform: uva-comic-rotate(225deg);
}
.uv-comic .star-spike:nth-child(7){
  transform: uva-comic-rotate(270deg);
}
.uv-comic .star-spike:nth-child(8){
  transform: uva-comic-rotate(315deg);
}
@keyframes uva-comic-bounce{
  0% {
    transform: translateX(-50%) translateY(0);
  }
  100% {
    transform: translateX(-50%) translateY(-1em);
  }
}
@keyframes uva-comic-blink{
  0%,
  45%,
  55%,
  100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(0.1);
  }
}
@keyframes uva-comic-look{
  0%,
  40%,
  60%,
  100% {
    transform: translate(-50%, -50%);
  }
  50% {
    transform: translate(-30%, -50%);
  }
  90% {
    transform: translate(-70%, -50%);
  }
}
@keyframes uva-comic-mouth{
  0%,
  100% {
    height: 0.5em;
    width: 2em;
  }
  50% {
    height: 1em;
    width: 1em;
    border-radius: 50%;
  }
}
@keyframes uva-comic-pulseDot{
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.5);
  }
}
@keyframes uva-comic-rotate{
  from {
    transform: uva-comic-rotate(0deg);
  }
  to {
    transform: uva-comic-rotate(360deg);
  }
}
.uv-comic .comic-panel::after{
  content: "WAIT!";
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  background: var(--primary-color);
  color: white;
  font-weight: bold;
  padding: 0.3em 0.6em;
  transform: uva-comic-rotate(5deg);
  border: var(--border-width) solid black;
  z-index: 4;
  font-size: 0.9em;
}
.uv-comic .comic-character::before{
  content: "";
  position: absolute;
  top: -1em;
  left: -1em;
  right: -1em;
  bottom: -1em;
  background-image: repeating-conic-gradient(
    rgba(0, 0, 0, 0.03) 0% 25%,
    rgba(255, 255, 255, 0.03) 0% 50%
  );
  background-size: 0.5em 0.5em;
  pointer-events: none;
  z-index: 3;
  opacity: 0.3;
  mix-blend-mode: overlay;
}
/* One replacement feature per page; existing functional cards keep their space. */
.uv-pacman .uv-art-stage{height:130px;width:100%;overflow:hidden}.uv-pacman .loader{position:relative;width:220px;height:80px;font-size:12px}.uv-pacman .point{z-index:0}
.uv-pan .uv-art-stage{height:170px;padding-top:78px}.uv-pan .panWrapper{width:190px}
.uv-laptop .uv-art-stage{position:relative;height:180px;overflow:visible}.uv-laptop .macbook{position:absolute;top:50%;left:50%;scale:1.2;transform-origin:center;margin:-45px 0 0 -78px}
.uv-comic .uv-art-stage{height:220px}.uv-comic.uv-art{height:224px}.uv-comic .comic-brutalist-loader{width:20em;height:20em;font-size:10px;margin:0}
body[data-sp-experience="k12"] .uv-plain-heading{display:block!important;min-height:0!important;background:none!important;box-shadow:none!important;border:0!important;padding:0!important}
body[data-sp-experience="k12"] .uv-bluecard>.card{width:100%;padding:0!important;overflow:visible;border:0;box-shadow:0 7px 18px #173a4e20;cursor:default}
.uv-bluecard .content{padding:30px;min-height:196px;border-radius:16px;text-align:start;background:#7fccf0}
.uv-bluecard .front{position:relative;inset:auto;padding:0}.uv-bluecard .card:hover .content{transform:none}.uv-bluecard .title{font-size:32px!important;line-height:1.25;margin:0 0 18px;color:#10384e!important;transform:translateZ(5rem)}.uv-bluecard .subtitle{font-size:15px;line-height:1.7;color:#173f54;max-width:60ch;transform:translateZ(2rem)}
/* IWhat1's full 3D motion is driven by existing click state, never hover. */
body[data-sp-experience="k12"] .uv-flip{width:100%;height:330px;max-width:100%;min-height:0;padding:0!important;border:0;background:none;border-radius:2rem;box-shadow:none;perspective:900px;overflow:visible;cursor:pointer;text-align:center}
body[data-sp-experience="k12"] .uv-flip .uv-flip-card{display:block;position:relative;width:100%;height:100%;padding:0;border:0;border-radius:2rem;overflow:visible;background:aliceblue;transform-style:preserve-3d;transition:transform 1.5s}
body[data-sp-experience="k12"] .uv-flip .uv-flip-front,body[data-sp-experience="k12"] .uv-flip .uv-flip-back{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;width:100%;height:100%;padding:26px;border-radius:2rem;overflow:auto;background:linear-gradient(-135deg,#0703f7,#bcff04);color:aliceblue;backface-visibility:hidden;box-shadow:0 0 10px 2px #32323266;line-height:1.6;text-shadow:0 1px 5px #000}
body[data-sp-experience="k12"] .uv-flip .uv-flip-front h2,body[data-sp-experience="k12"] .uv-flip .uv-flip-back h2,body[data-sp-experience="k12"] .uv-flip .uv-flip-front strong,body[data-sp-experience="k12"] .uv-flip .uv-flip-back strong{font-size:26px!important;line-height:1.35;color:aliceblue;max-width:100%;overflow-wrap:anywhere;margin:0;padding:8px 12px;border-radius:8px;background:#071d4b88}
body[data-sp-experience="k12"] .uv-flip .uv-flip-front p,body[data-sp-experience="k12"] .uv-flip .uv-flip-back p{color:aliceblue;font-size:16px;max-width:100%;margin:0;overflow-wrap:anywhere;background:#071d4b77;padding:6px 10px;border-radius:6px}
body[data-sp-experience="k12"] .uv-flip .uv-flip-front>span[style],body[data-sp-experience="k12"] .uv-flip .uv-flip-back>span[style]{display:none}
body[data-sp-experience="k12"] .uv-flip .uv-flip-back{transform:rotateY(180deg) rotateZ(180deg)}
body[data-sp-experience="k12"] .uv-flip.flipped>.uv-flip-card,body[data-sp-experience="k12"] .uv-flip.revealed>.uv-flip-card{transform:rotateY(180deg) rotateZ(180deg)}
body[data-sp-experience="k12"] .uv-flip:focus-visible{outline:3px solid var(--ix-brand);outline-offset:8px}
body[data-sp-experience="k12"] .uv-flip.memory-card{height:220px;border-radius:2rem;min-height:0;max-width:none}
body[data-sp-experience="k12"] .uv-flip.memory-card .memory-cover,body[data-sp-experience="k12"] .uv-flip.memory-card .memory-label{display:flex!important;opacity:1!important;padding:18px}
body[data-sp-experience="k12"] .uv-flip.memory-card .memory-label{font-size:21px;font-weight:700}.uv-flip.memory-card.selected{outline:3px solid var(--ix-brand);outline-offset:5px}
/* The original split-flap panel is driven by the real study countdown, not CSS loops. */
body[data-sp-experience="k12"] .uv-focus-panel{padding:28px 18px!important}.uv-countdown{display:flex;justify-content:center;margin:26px 0!important;font-family:Arial,sans-serif!important}
.uv-countdown .container{height:72px;gap:4px;align-items:center;justify-content:center}.uv-countdown .nums{width:46px;height:72px;border-radius:5px;flex:0 0 46px;box-shadow:0 4px 10px #0003;isolation:isolate}.uv-countdown .nums:after{content:attr(data-bottom);font-size:52px}.uv-countdown .num{font-size:52px;animation:none!important;transition:none}.uv-countdown .num:before{line-height:1.38}.uv-countdown .nums.is-changing .num{animation:uva-focus-flap .55s ease-in both!important;transform-origin:50% 50%}.uv-countdown .uv-clock-colon{font-size:40px;line-height:1;color:var(--ix-ink);font-weight:700;margin:0 1px}
@keyframes uva-focus-flap{from{transform:rotateX(0)}to{transform:rotateX(-180deg)}}
.uv-focus-reset{display:inline-block;background:none;border:0;color:var(--ix-brand);font:inherit;font-size:13px;text-decoration:underline;padding:8px;cursor:pointer}
/* Source text-entry style replaces the existing library search control. */
.uv-entry{width:100%;min-width:0;padding:32px 10px 14px 0}.uv-entry .brutalist-container.material-search{display:block;width:100%;padding:0;margin:0;background:none;border:0;border-radius:0;position:relative}.uv-entry .brutalist-input#materialSearch{display:block;min-width:0;width:100%;min-height:56px;padding:14px;font-family:monospace;border:4px solid #000;background:#fff;color:#000;border-radius:0;font-size:18px;font-weight:700;box-shadow:5px 5px 0 #000,10px 10px 0 #4a90e2}.uv-entry .brutalist-label{display:block;left:-3px;top:-28px;font-size:12px}.uv-entry .brutalist-input:focus{animation:uva-entry-focus-pulse 4s ease infinite}
/* Retain the original game button's yellow faces and press/shimmer motion. */
.uv-game-button .neo-pop-tilted-button{margin-top:20px;width:max-content;max-width:100%;min-height:54px;color:#000!important;background:#b7a81d!important;font-family:inherit}.uv-game-button .neo-pop-tilted-button>span{padding:12px 28px;background:#ffeb34!important;color:#000!important;white-space:normal}.uv-game-button .neo-pop-tilted-button:focus-visible{outline:3px solid #263d49;outline-offset:6px}.uv-game-button .neo-pop-tilted-button:disabled{opacity:.55;cursor:default}
body[data-sp-experience="k12"] article.k12-game-card{cursor:default;text-align:start}.k12-game-card h3{font-size:22px;line-height:1.35}.k12-game-card .pill{display:inline-block}
@media(max-width:800px){.uv-countdown .container{height:86px;gap:5px}.uv-countdown .nums{width:56px;height:86px;flex-basis:56px}.uv-countdown .nums:after,.uv-countdown .num{font-size:62px}.uv-focus-panel{min-height:320px}.uv-bluecard .content{padding:24px}.uv-bluecard .title{font-size:29px!important}}
@media(max-width:420px){body[data-sp-experience="k12"] .uv-flip .uv-flip-front h2,body[data-sp-experience="k12"] .uv-flip .uv-flip-back h2,body[data-sp-experience="k12"] .uv-flip .uv-flip-front strong,body[data-sp-experience="k12"] .uv-flip .uv-flip-back strong{font-size:22px!important}.uv-countdown .nums{width:50px;flex-basis:50px}.uv-countdown .container{gap:4px}.uv-countdown .nums:after,.uv-countdown .num{font-size:60px}.uv-entry .brutalist-input#materialSearch{font-size:16px}.uv-laptop .macbook{scale:1.1}}
@media(prefers-reduced-motion:reduce){.uv-flip .uv-flip-card{transition:none!important}.uv-countdown .nums.is-changing .num{animation:none!important;transform:rotateX(-180deg)}.uv-entry .brutalist-input:focus{animation:none!important}}


/* K-12 learner finish: isolate blur to words/metrics, not the entire hero art. */
body[data-sp-experience="k12"] .ix-wordmark{max-width:200px;height:52px;min-width:0;line-height:1}
body[data-sp-experience="k12"] .ix-wordmark .k12-brand-logo{display:block;width:auto;max-width:188px;max-height:49px;object-fit:contain}
body[data-sp-experience="k12"] .uv-bookshelf-hero .uv-hero-copy{
  width:100%;max-width:none;padding:4px;background:transparent;box-shadow:none;
  text-shadow:none;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;
}
body[data-sp-experience="k12"] .uv-bookshelf-hero .home-welcome-person{flex:1;min-width:220px}
body[data-sp-experience="k12"] .uv-bookshelf-hero .k12-hero-logo{
  display:block;max-width:min(210px,70%);max-height:64px;object-fit:contain;
  background:rgba(255,255,255,.94);border-radius:12px;padding:5px 12px;margin-bottom:12px;
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
}
body[data-sp-experience="k12"] .uv-bookshelf-hero .home-welcome-person h1,
body[data-sp-experience="k12"] .uv-bookshelf-hero .home-welcome-person p{
  display:table;width:fit-content;max-width:min(570px,100%);margin:7px 0;padding:6px 12px;
  border-radius:12px;color:#fff!important;background:rgba(5,25,38,.76);
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);text-shadow:none;
}
body[data-sp-experience="k12"] .uv-bookshelf-hero .home-welcome-person h1{font-size:clamp(30px,4vw,48px)!important;line-height:1.14!important;font-weight:800}
body[data-sp-experience="k12"] .uv-bookshelf-hero .home-welcome-person p{font-size:15px;line-height:1.45}
body[data-sp-experience="k12"] .home-top-metrics{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
body[data-sp-experience="k12"] .home-top-metrics .k12-metric-chip{
  position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:9px;
  min-height:52px;padding:10px 15px;border:1px solid rgba(255,255,255,.55);border-radius:16px;
  background:rgba(235,255,252,.9)!important;color:#093847!important;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 6px 16px #041d2540;white-space:nowrap;
}
body[data-sp-experience="k12"] .k12-metric-chip .k12-metric-icon{display:grid;place-items:center;font-size:24px;line-height:1}
body[data-sp-experience="k12"] .k12-metric-chip strong{font-weight:800;font-size:14px;color:#093847}
body[data-sp-experience="k12"] .k12-metric-chip .k12-metric-tooltip{
  position:absolute;z-index:40;bottom:calc(100% + 12px);left:50%;min-width:220px;
  max-width:270px;transform:translate(-50%,6px);opacity:0;visibility:hidden;
  pointer-events:none;padding:12px 15px;border-radius:12px;background:#063845;
  color:#fff;font-size:12px;font-weight:550;line-height:1.45;white-space:normal;
  box-shadow:0 12px 30px #051f2f55;transition:opacity .2s,transform .2s,visibility .2s;
}
body[data-sp-experience="k12"] .k12-metric-chip:is(:hover,:focus-visible) .k12-metric-tooltip{
  opacity:1;visibility:visible;transform:translate(-50%,0);
}
body[data-sp-experience="k12"] .k12-metric-chip:is(:hover,:focus-visible) .k12-metric-icon{animation:k12-metric-wink .65s ease}
@keyframes k12-metric-wink{30%{filter:brightness(1.28)}70%{filter:brightness(.93)}}
body[data-sp-experience="k12"] .uv-flip .uv-flip-front,
body[data-sp-experience="k12"] .uv-flip .uv-flip-back{
  background:linear-gradient(136deg,#057d8d 2%,#10b5ad 56%,#b6eb8e 100%)!important;
  color:#082c39!important;text-shadow:none!important;
  border:2px solid rgba(255,255,255,.62);box-shadow:0 10px 25px #0a64633b;
}
body[data-sp-experience="k12"] .uv-flip .uv-flip-back{
  background:linear-gradient(145deg,#b6ed8f 0%,#4cd6bd 52%,#087c8e 100%)!important;
}
body[data-sp-experience="k12"] .uv-flip :is(.uv-flip-front,.uv-flip-back) :is(h2,strong,p){
  color:#07323f!important;background:rgba(255,255,255,.9)!important;
  text-shadow:none!important;padding:9px 13px;border-radius:12px;line-height:1.45;
}
body[data-sp-experience="k12"] .ix-page-achievements .badge-card{
  background:linear-gradient(140deg,#dcfaf5,#c5f4e9 55%,#dcf7bc)!important;
  color:#063843!important;border:1px solid #7dcfc5!important;
}
body[data-sp-experience="k12"] .ix-page-achievements .badge-card strong{color:#083544!important}
body[data-sp-experience="k12"] .ix-page-achievements .badge-card:focus-visible{outline:3px solid #0c8a91}
body[data-sp-experience="k12"] .page-banner:has(.k12-page-illustration){position:relative;min-height:190px}
body[data-sp-experience="k12"] .page-banner .k12-page-illustration{
  position:absolute;right:12px;top:50%;width:clamp(110px,17vw,176px);height:160px;
  object-fit:contain;transform:translateY(-50%);pointer-events:none;filter:drop-shadow(0 8px 12px #106c6730);
}
body[data-sp-experience="k12"] .page-banner:has(.k12-page-illustration) .uv-hero-copy,
body[data-sp-experience="k12"] .page-banner:has(.k12-page-illustration) .card{padding-right:190px!important}
body[data-sp-experience="k12"] .ix-page-achievements .streak-card img{background:transparent!important;border:0!important}
body[data-sp-experience="k12"] .persistent-k12-tool-links .ix-icon{overflow:visible}
body[data-sp-experience="k12"] .persistent-k12-tool-links .ix-home-door{transform-origin:0% 50%;transition:transform .4s ease}
body[data-sp-experience="k12"] .persistent-k12-tool-links a:is(:hover,:focus-visible) .ix-icon-home .ix-home-door{transform:perspective(22px) rotateY(-62deg)}
body[data-sp-experience="k12"] .persistent-k12-tool-links a:is(:hover,:focus-visible) .ix-icon:is(.ix-icon-book,.ix-icon-calendar,.ix-icon-award,.ix-icon-check) path{
  stroke-dasharray:90;animation:k12-nav-draw .85s ease both;
}
@keyframes k12-nav-draw{from{stroke-dashoffset:90}to{stroke-dashoffset:0}}
html[data-k12-theme="dark"] body[data-sp-experience="k12"] .k12-metric-chip{background:rgba(13,61,72,.92)!important;color:#e8fffa!important}
html[data-k12-theme="dark"] body[data-sp-experience="k12"] .k12-metric-chip strong{color:#e8fffa}
@media(max-width:900px){
  body[data-sp-experience="k12"] .page-banner .k12-page-illustration{width:100px;opacity:.85;right:8px}
  body[data-sp-experience="k12"] .page-banner:has(.k12-page-illustration) .uv-hero-copy,
  body[data-sp-experience="k12"] .page-banner:has(.k12-page-illustration) .card{padding-right:110px!important}
}
@media(max-width:600px){
  body[data-sp-experience="k12"] .uv-bookshelf-hero .uv-hero-copy{display:block}
  body[data-sp-experience="k12"] .home-top-metrics{margin-top:16px;justify-content:flex-start}
  body[data-sp-experience="k12"] .home-top-metrics .k12-metric-chip{min-height:47px;padding:8px 11px}
  body[data-sp-experience="k12"] .page-banner .k12-page-illustration{position:relative;top:auto;right:auto;transform:none;display:block;height:110px;margin:10px auto 0}
  body[data-sp-experience="k12"] .page-banner:has(.k12-page-illustration) .uv-hero-copy,
  body[data-sp-experience="k12"] .page-banner:has(.k12-page-illustration) .card{padding-right:20px!important}
  body[data-sp-experience="k12"] .ix-wordmark .k12-brand-logo{max-width:145px}
}
@media(prefers-reduced-motion:reduce){
  body[data-sp-experience="k12"] .persistent-k12-tool-links .ix-icon path,
  body[data-sp-experience="k12"] .persistent-k12-tool-links .ix-home-door,
  body[data-sp-experience="k12"] .k12-metric-chip .k12-metric-icon{animation:none!important;transition:none!important;transform:none!important}
}


/* STUDYPULSE-K12-LEARNER-UI-V2: scoped to student app-grid; no change to login or staff. */
body[data-sp-experience="k12"] .app-grid{
  --kid-border:#bddcdd;--kid-ink:#163d4c;--kid-green:#1aa584;--kid-teal:#068b99;
  background:linear-gradient(130deg,#eefaf6,#f9fcff 65%,#eff9fa)
}
body[data-sp-experience="k12"] .app-grid>.main{padding:28px clamp(16px,3.5vw,50px) 62px}
body[data-sp-experience="k12"] .app-grid .profile-rail{background:linear-gradient(#fff,#f7fffd);border-color:#dce9e8}
body[data-sp-experience="k12"] .app-grid .persistent-k12-tool-links a{min-height:47px;border-radius:12px!important;transition:background .2s,transform .2s,box-shadow .2s!important}
body[data-sp-experience="k12"] .app-grid .persistent-k12-tool-links a:hover{background:#e1fbf5!important;box-shadow:inset 0 0 0 1px #bde3d8!important;transform:translateX(3px)!important}
body[data-sp-experience="k12"] .app-grid .persistent-k12-tool-links a.active{background:linear-gradient(90deg,#c4f3e5,#daf8f4)!important;box-shadow:inset 3px 0 #00988e!important;color:#086776!important}
body[data-sp-experience="k12"] .app-grid .page-banner{border-radius:21px!important;border:1px solid #c0e2e0!important;background:linear-gradient(115deg,#e5f8f2,#edf8ff 65%,#eefbe6)!important;padding:24px 28px!important;box-shadow:0 8px 26px #1b6d7b13!important;margin-bottom:26px!important}
body[data-sp-experience="k12"] .app-grid .page-banner :is(h1,p){color:#153f50!important}
body[data-sp-experience="k12"] .app-grid .uv-bookshelf-hero{background:#111!important}
body[data-sp-experience="k12"] .app-grid .uv-bookshelf-hero .uv-hero-copy{background:transparent!important}
body[data-sp-experience="k12"] .app-grid :is(.card,.portal-layer,.course-tile,.subject-card,.badge-card,.summary-card,.material-card,.resource-card,.course-dashboard,.course-view-hero,.certificate-side){border:1px solid var(--kid-border)!important;border-radius:18px!important;box-shadow:0 4px 0 #badbdc7a,0 10px 24px #123e5415!important;transition:border-color .2s,box-shadow .2s,transform .2s}
body[data-sp-experience="k12"] .app-grid :is(.course-tile,.subject-card,.home-course-card,.badge-card,.resource-card,.material-card):is(:hover,:focus-within){border-color:#68cabe!important;box-shadow:0 5px 0 #9ddbd6,0 15px 26px #11675e1e!important}
body[data-sp-experience="k12"] .app-grid :is(.course-tile,.subject-card,.home-course-card):hover{transform:translateY(-2px)!important}
body[data-sp-experience="k12"] .app-grid :is(.layer-heading,.widget-heading,.catalog-toolbar) h2{font-size:clamp(20px,2vw,26px);font-weight:800}
body[data-sp-experience="k12"] .app-grid :is(.cta,.k12-kid-action,.course-open,.k12-course-action){border-radius:12px!important;min-height:43px;background:linear-gradient(180deg,#15b9b0,#058b98)!important;color:#fff!important;font-weight:800!important;border:1px solid #07848c!important;box-shadow:0 4px 0 #0c6978,0 9px 17px #097f8026!important;transition:transform .15s,filter .15s,box-shadow .15s!important}
body[data-sp-experience="k12"] .app-grid :is(.cta,.k12-kid-action,.course-open,.k12-course-action):is(:hover,:focus-visible):not(:disabled){filter:brightness(1.05);transform:translateY(-2px)!important;box-shadow:0 6px 0 #0c6978,0 11px 20px #097f8030!important}
body[data-sp-experience="k12"] .app-grid :is(.soft-btn,.round-btn,.soft-icon,.heart-btn,.k12-text-action,.filter-chip,.view-tabs button,.date-btn,.carousel-controls button,.flash-controls button){border-radius:11px!important;background:#fff!important;color:#116476!important;border:1px solid #c5e0e3!important;font-weight:750;box-shadow:0 3px 0 #d2e6e7!important;transition:background .16s,transform .16s!important}
body[data-sp-experience="k12"] .app-grid :is(.soft-btn,.round-btn,.filter-chip,.view-tabs button,.date-btn):hover:not(:disabled){background:#e6fbf5!important;transform:translateY(-1px)!important}
body[data-sp-experience="k12"] .app-grid :is(.filter-chip.active,.view-tabs button.active,.date-btn.active){background:#d4f7e9!important;color:#067477!important;border-color:#0b9d97!important}
body[data-sp-experience="k12"] .app-grid :is(button:disabled,[aria-disabled=true]){cursor:not-allowed;opacity:.55;transform:none!important;box-shadow:none!important}
body[data-sp-experience="k12"] .app-grid :is(a,button,[role=button]):focus-visible{outline:3px solid #03a49b!important;outline-offset:3px}
body[data-sp-experience="k12"] .app-grid :is(input:not([type=checkbox]):not([type=radio]),select,textarea){border-radius:10px!important;border:1px solid #b7d6dc!important;background:#fff!important;color:#174351}
body[data-sp-experience="k12"] .app-grid .progress-line{background:#e1f1ee!important;border-radius:999px!important;overflow:hidden}
body[data-sp-experience="k12"] .app-grid .progress-line>span{background:linear-gradient(90deg,#0ba4a0,#7ed265)!important}
body[data-sp-experience="k12"] .app-grid .pill{border-radius:999px!important;padding:5px 12px!important}
body[data-sp-experience="k12"] .app-grid .live-empty-copy{border:1px dashed #aedbd6!important;border-radius:14px!important;background:#f4fffa!important;padding:23px!important}
body[data-sp-experience="k12"] .home-main .ix-continue{background:linear-gradient(145deg,#fff,#f4fffd)!important}
body[data-sp-experience="k12"] .home-main .ix-today{background:linear-gradient(145deg,#fff5d7,#f2fff9)!important}
body[data-sp-experience="k12"] .home-main .home-course-card{border:1px solid #bce3dd!important;border-radius:17px!important;box-shadow:0 4px 0 #c3e4e0,0 9px 20px #0879781e!important;padding:18px!important;background:#fff!important}
body[data-sp-experience="k12"] .home-main .adventure-art{background:linear-gradient(140deg,#dcf9ed,#e9f5ff)!important;border-radius:16px}
body[data-sp-experience="k12"] .ix-page-courses .course-dashboard{background:linear-gradient(125deg,#dff8ef,#edf8ff)!important}
body[data-sp-experience="k12"] .ix-page-courses .course-tile{overflow:hidden!important;background:#fff!important}
body[data-sp-experience="k12"] .ix-page-courses .course-art{background:linear-gradient(120deg,#def8ef,#eaf6ff)}
body[data-sp-experience="k12"] .ix-page-courses .catalog-toolbar{display:flex;gap:13px;flex-wrap:wrap;padding:17px 0}
body[data-sp-experience="k12"] .ix-page-courses .k12-course-library-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
body[data-sp-experience="k12"] .ix-page-lessons .subject-card{position:relative;min-height:230px!important;background:#fff!important;padding:19px!important;text-align:left}
body[data-sp-experience="k12"] .ix-page-lessons .subject-card img{display:block;width:116px;height:93px;object-fit:contain;margin:6px auto 15px}
body[data-sp-experience="k12"] .ix-page-lessons .subject-card.selected{border:2px solid #0a9f99!important;background:linear-gradient(130deg,#eafff6,#e9f9ff)!important}
body[data-sp-experience="k12"] .ix-page-lessons .subject-card.selected:after{content:"✓ Selected";position:absolute;right:11px;top:11px;border-radius:999px;padding:4px 9px;background:#0c9e8c;color:#fff;font-size:11px;font-weight:800}
body[data-sp-experience="k12"] .ix-page-achievements .badge-card{background:linear-gradient(135deg,#e6fff7,#ddf9de)!important;min-height:180px}
body[data-sp-experience="k12"] .ix-page-achievements .badge-card img{height:92px;width:92px;object-fit:contain}
body[data-sp-experience="k12"] .ix-page-achievements .streak-card{background:linear-gradient(125deg,#e3f9ff,#e9ffea)!important}
body[data-sp-experience="k12"] .ix-page-planner .date-btn{min-height:60px!important}
body[data-sp-experience="k12"] .ix-page-planner .focus-card{background:linear-gradient(120deg,#e5f9fa,#fff)!important}
body[data-sp-experience="k12"] .ix-page-assignments .summary-card{min-height:107px;padding:18px!important}
body[data-sp-experience="k12"] .ix-page-materials .material-toolbar{background:#eafbfa!important}
body[data-sp-experience="k12"] .ix-page-courseview .course-view-hero{background:linear-gradient(125deg,#e4f9ed,#fff)!important}
body[data-sp-experience="k12"] .ix-page-courseview .view-tabs{display:flex;gap:9px;flex-wrap:wrap;background:#edfaf7;padding:10px;border:1px solid #d1e9e5;border-radius:13px}
body[data-sp-experience="k12"] .ix-page-flashcards .flash-stage{background:linear-gradient(120deg,#fff,#edfaff)!important}
body[data-sp-experience="k12"] .ix-page-grades .grade-hero{background:linear-gradient(125deg,#e8f9f1,#f4faff)!important}
body[data-sp-experience="k12"] .ix-page-certificates .certificate-card{border-radius:19px!important}
html[data-k12-theme=dark] body[data-sp-experience=k12] .app-grid{background:#112d39;--kid-border:#406570}
html[data-k12-theme=dark] body[data-sp-experience=k12] .app-grid :is(.card,.course-tile,.subject-card,.badge-card){background:#203d48!important;color:#ebf8f9!important;border-color:#416774!important}
html[data-k12-theme=dark] body[data-sp-experience=k12] .app-grid .page-banner{background:linear-gradient(115deg,#234751,#23445a)!important}
html[data-k12-theme=dark] body[data-sp-experience=k12] .app-grid .page-banner :is(h1,p){color:#edf9fa!important}
@media(max-width:800px){body[data-sp-experience=k12] .app-grid>.main{padding:19px 15px 42px}body[data-sp-experience=k12] .app-grid .page-banner{padding:18px!important}}
@media(prefers-reduced-motion:reduce){body[data-sp-experience=k12] .app-grid :is(.card,.course-tile,.subject-card,.badge-card,.cta,.k12-kid-action){transition:none!important;transform:none!important}}


/* Home learning tabs and real-course skill cards. */
body[data-sp-experience="k12"] .ixl-workbench{margin:22px 0 26px;padding:19px;border:1px solid #a7d9d2;border-radius:20px;background:linear-gradient(125deg,#d9f7ed,#e7f6ff);box-shadow:0 5px 0 #c1e0d9,0 12px 22px #0c726e17}
body[data-sp-experience="k12"] .ixl-workbench-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:15px;margin-bottom:15px}
body[data-sp-experience="k12"] .ixl-workbench h2{font-size:clamp(20px,2vw,25px);margin:3px 0 5px;font-weight:800}
body[data-sp-experience="k12"] .ixl-workbench-header p{margin:0}
body[data-sp-experience="k12"] .ixl-workbench-tabs{display:flex;gap:7px;flex-wrap:wrap}
body[data-sp-experience="k12"] .ixl-workbench-tabs button{min-height:43px;padding:10px 15px;border-radius:10px;background:#fff;border:1px solid #b8dcd8;color:#166576;font-weight:800;cursor:pointer}
body[data-sp-experience="k12"] .ixl-workbench-tabs button[aria-selected="true"]{color:#fff;background:#087f8a;border-color:#047881;box-shadow:0 3px 0 #0b5967}
body[data-sp-experience="k12"] .ixl-workbench-list{background:#fff;border:1px solid #b5dede;border-radius:15px;padding:13px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;min-height:100px}
body[data-sp-experience="k12"] .ixl-workbench .ixl-skill-card{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:12px;background:#fff;border:1px solid #d6e7e5;border-radius:13px;padding:13px}
body[data-sp-experience="k12"] .ixl-workbench .ixl-skill-card img{width:48px;height:48px;object-fit:contain}
body[data-sp-experience="k12"] .ixl-workbench .ixl-skill-card strong{font-size:14px;color:#173f4c;line-height:1.4;display:block}
body[data-sp-experience="k12"] .ixl-workbench .ixl-skill-card small{display:block;color:#607a81;font-size:12px}
body[data-sp-experience="k12"] .ixl-workbench .ixl-skill-card a{display:inline-flex;align-items:center;min-height:39px;padding:9px 12px;border-radius:10px;background:#eafadb;border:1px solid #b0dba0;color:#287141;font-size:13px;font-weight:800}
body[data-sp-experience="k12"] .ixl-workbench .ixl-skill-card a:hover{background:#d6f5c6}
body[data-sp-experience="k12"] .ixl-workbench-empty{grid-column:1/-1;display:flex;align-items:center;gap:14px;padding:15px;color:#476775}
body[data-sp-experience="k12"] .ixl-workbench-empty img{width:65px;height:65px;object-fit:contain}
body[data-sp-experience="k12"] .ixl-workbench-footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:14px 5px 0;font-size:12px;color:#5a737e}
body[data-sp-experience="k12"] .ixl-workbench-footer a{font-weight:800;color:#087889}
body[data-sp-experience="k12"] .ixl-workbench-footer a:hover{text-decoration:underline}
html[data-k12-theme="dark"] body[data-sp-experience="k12"] .ixl-workbench{background:#244853;border-color:#477580}
html[data-k12-theme="dark"] body[data-sp-experience="k12"] .ixl-workbench-list,html[data-k12-theme="dark"] body[data-sp-experience="k12"] .ixl-workbench .ixl-skill-card{background:#1c3943;border-color:#396674}
html[data-k12-theme="dark"] body[data-sp-experience="k12"] .ixl-workbench .ixl-skill-card :is(strong,small){color:#e9fafa}
@media(max-width:1100px){body[data-sp-experience="k12"] .ixl-workbench-list{grid-template-columns:1fr}}
@media(max-width:540px){body[data-sp-experience="k12"] .ixl-workbench{padding:14px}body[data-sp-experience="k12"] .ixl-workbench-tabs{margin-top:12px}body[data-sp-experience="k12"] .ixl-workbench .ixl-skill-card{grid-template-columns:48px 1fr}body[data-sp-experience="k12"] .ixl-workbench .ixl-skill-card a{grid-column:2;justify-self:start}}


/* Page 2 - enrolment-backed searchable IXL-inspired course library. */
body[data-sp-experience=k12] .ix-page-courses .ixl-course-search{display:flex;align-items:center;gap:8px;min-width:205px;padding:4px 11px;border-radius:11px;border:1px solid #bbdce0;background:#fff;box-shadow:0 3px 0 #d4e8e8}
body[data-sp-experience=k12] .ix-page-courses .ixl-course-search svg{flex:0 0 19px;color:#137f88}
body[data-sp-experience=k12] .ix-page-courses .ixl-course-search input{width:100%;min-height:36px!important;height:36px!important;border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important;padding:3px!important}
body[data-sp-experience=k12] .ix-page-courses .ixl-course-results{font-size:13px;color:#4c7380;margin:0 0 13px}
body[data-sp-experience=k12] .ix-page-courses .ixl-course-no-match{padding:22px;text-align:center;background:#f2fff9;color:#426e73;border:1px dashed #a4d6ce;border-radius:15px;margin:10px 0}
body[data-sp-experience=k12] .ix-page-courses #courseFilters{display:flex;flex-wrap:wrap;gap:7px}
@media(max-width:650px){body[data-sp-experience=k12] .ix-page-courses .ixl-course-search{width:100%;min-width:0}body[data-sp-experience=k12] .ix-page-courses .k12-course-library-actions{width:100%}}


/* Page 3: live course-backed lesson selection and unmistakable active card. */
body[data-sp-experience=k12] .ix-page-lessons .ixl-lesson-heading{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:13px;margin:0 0 17px}
body[data-sp-experience=k12] .ix-page-lessons .ixl-lesson-heading strong{display:block;color:#184d5d;font-size:19px;font-weight:850}
body[data-sp-experience=k12] .ix-page-lessons .ixl-lesson-heading span{color:#587882;font-size:13px}
body[data-sp-experience=k12] .ix-page-lessons .ixl-lesson-heading a{display:inline-flex;align-items:center;padding:9px 13px;border:1px solid #abddd0;border-radius:10px;background:#e3faed;color:#187b59;font-weight:800}
body[data-sp-experience=k12] .ix-page-lessons .ixl-lesson-heading a:hover{background:#d1f7e4}
body[data-sp-experience=k12] .ix-page-lessons .subject-card:focus-visible{outline:3px solid #059d97!important;outline-offset:4px}
body[data-sp-experience=k12] .ix-page-lessons .subject-card .pill{font-weight:800}


/* Page 4: study achievements with a discoverable earned-badge shelf. */
body[data-sp-experience=k12] .ix-page-achievements .ixl-badge-controls{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 19px;padding:11px;border:1px solid #d0e5e4;border-radius:12px;background:#f3fffc}
body[data-sp-experience=k12] .ix-page-achievements .ixl-badge-controls button{min-height:41px;padding:8px 16px;border:1px solid #bfdcde;border-radius:11px;color:#156777;background:#fff;font-weight:800;cursor:pointer}
body[data-sp-experience=k12] .ix-page-achievements .ixl-badge-controls button.active{background:#087f87;border-color:#087a82;color:#fff;box-shadow:0 3px 0 #075561}
body[data-sp-experience=k12] .ix-page-achievements .badge-card{transition:box-shadow .2s,transform .2s!important}
body[data-sp-experience=k12] .ix-page-achievements .badge-card:hover{transform:translateY(-2px)!important}
body[data-sp-experience=k12] .ix-page-achievements .badge-card :is(strong,span){overflow-wrap:anywhere}
html[data-k12-theme=dark] body[data-sp-experience=k12] .ix-page-achievements .ixl-badge-controls{background:#233d47;border-color:#42666e}


/* Page 5: planner buttons now select a real due-date and form replaces browser prompt. */
body[data-sp-experience=k12] .ix-page-planner .date-btn.today:not(.active){box-shadow:inset 0 0 0 2px #6acabd!important}
body[data-sp-experience=k12] .ix-page-planner .ixl-planner-filter{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:17px 0 12px}
body[data-sp-experience=k12] .ix-page-planner .ixl-planner-filter span{font-size:12px;color:#587985}
body[data-sp-experience=k12] .ix-page-planner .ixl-planner-task-form{border:1px solid #b9e3da;border-radius:15px;padding:18px;background:#effcf6;margin:17px 0}
body[data-sp-experience=k12] .ix-page-planner .ixl-planner-task-form label{display:block;font-size:14px;font-weight:750;margin-bottom:8px}
body[data-sp-experience=k12] .ix-page-planner .ixl-planner-task-form input{width:100%;margin-bottom:12px}
body[data-sp-experience=k12] .ix-page-planner .ixl-planner-task-form>div{display:flex;align-items:center;flex-wrap:wrap;gap:14px}
body[data-sp-experience=k12] .ix-page-planner .ixl-planner-task-form span{font-size:12px;color:#55747c}
body[data-sp-experience=k12] .ix-page-planner .ixl-planner-no-match{padding:15px;margin:10px 0;color:#476c79;background:#f0fcf9;border:1px dashed #b2dfd5;border-radius:12px}


/* Page 6: a browsable, real-data library with a framed note desk. */
body[data-sp-experience=k12] .ix-page-materials .material-toolbar{background:linear-gradient(125deg,#ebfcf7,#f2faff)!important}
body[data-sp-experience=k12] .ix-page-materials .material-search{display:flex;align-items:center;gap:11px;width:100%;border:1px solid #c0dddb;background:#fff;border-radius:12px;padding:5px 13px}
body[data-sp-experience=k12] .ix-page-materials .material-search svg{flex:0 0 20px;color:#058c95}
body[data-sp-experience=k12] .ix-page-materials .material-search input{border:0!important;box-shadow:none!important;outline:none!important;background:transparent!important;padding:5px!important;flex:1}
body[data-sp-experience=k12] .ix-page-materials .material-card{background:#fff!important;padding:19px!important}
body[data-sp-experience=k12] .ix-page-materials .material-card .material-icon{display:grid;place-items:center;width:55px;height:55px;border-radius:14px;background:#e2f8ee;font-size:28px}
body[data-sp-experience=k12] .ix-page-materials .material-card .material-open{border-radius:10px;background:#e5f9e7;border:1px solid #a6dcae;color:#196c3a;font-weight:800;padding:8px 13px}
body[data-sp-experience=k12] .ix-page-materials .smart-notes{background:linear-gradient(145deg,#fffef7,#f3fffb)!important}
body[data-sp-experience=k12] .ix-page-materials .note-tools button{background:#e9f7ff;color:#1b697b;border:1px solid #bcdde5;border-radius:10px;padding:7px 10px;font-weight:750}
body[data-sp-experience=k12] .ix-page-materials .ixl-material-count{font-size:13px;color:#527784;padding:9px 0 14px}
body[data-sp-experience=k12] .ix-page-materials .ixl-material-empty{padding:20px;text-align:center;color:#3c6d79;background:#f2fff9;border:1px dashed #afdacf;border-radius:14px}


/* Page 7: homework cards and accountable live status filters. */
body[data-sp-experience=k12] .ix-page-assignments .assignment-summary{gap:15px}
body[data-sp-experience=k12] .ix-page-assignments .summary-card{background:linear-gradient(120deg,#f0fff9,#f0f8ff)!important;border:1px solid #bde2de!important;box-shadow:0 4px 0 #c3e4e0!important}
body[data-sp-experience=k12] .ix-page-assignments .summary-card strong{font-size:clamp(23px,2.5vw,34px);color:#155067}
body[data-sp-experience=k12] .ix-page-assignments .assignment-row{border:1px solid #cbe4e5;border-radius:15px;padding:17px;margin:0 0 13px;background:#fff;box-shadow:0 4px 0 #deebed;transition:border-color .18s,box-shadow .18s}
body[data-sp-experience=k12] .ix-page-assignments .assignment-row:hover{border-color:#9bd8c8;box-shadow:0 5px 0 #bce4d7}
body[data-sp-experience=k12] .ix-page-assignments .assignment-state{border-radius:999px;background:#e4faf5;color:#126e70;padding:6px 10px;font-size:12px;font-weight:800}
body[data-sp-experience=k12] .ix-page-assignments .assignment-row.due .assignment-state{background:#fff1d7;color:#8b5a21}
body[data-sp-experience=k12] .ix-page-assignments .assignment-open{display:inline-flex;align-items:center;border-radius:10px;border:1px solid #9bd7b0;background:#e4f9e6;padding:8px 12px;font-weight:800;color:#196f3a}
body[data-sp-experience=k12] .ix-page-assignments .ixl-assignment-status{font-size:13px;margin:9px 0 13px;color:#547380}
body[data-sp-experience=k12] .ix-page-assignments .ixl-assignment-no-match{padding:20px;border-radius:12px;border:1px dashed #b3dcd2;background:#f2fffa;color:#47727a}
body[data-sp-experience=k12] .ix-page-assignments .mission-card{background:linear-gradient(140deg,#f0fbff,#fffef6)!important}


/* Pages 8–11: practice, flashcards, course readers and resource workspaces. */
body[data-sp-experience=k12] .ix-page-quiz .quiz-card{max-width:960px;padding:clamp(20px,3vw,34px)!important;background:linear-gradient(145deg,#fff,#f6fffb)!important}
body[data-sp-experience=k12] .ix-page-quiz .quiz-card .question{font-size:clamp(21px,2.6vw,30px)!important;line-height:1.4;margin:5px 0 22px}
body[data-sp-experience=k12] .ix-page-quiz .answers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
body[data-sp-experience=k12] .ix-page-quiz .answers button.answer{position:relative;display:flex;align-items:center;gap:12px;min-height:75px;border:2px solid #c4dfe2;border-radius:14px!important;padding:17px 21px;background:#fff;color:#1d4755;text-align:left;font-size:16px;line-height:1.4;font-weight:750;box-shadow:0 4px 0 #d8ecee;transition:background .15s,border-color .15s,transform .15s}
body[data-sp-experience=k12] .ix-page-quiz .answers button.answer:hover:not(:disabled){border-color:#6fcbc2;background:#f0fff8;transform:translateY(-2px)}
body[data-sp-experience=k12] .ix-page-quiz .answers button.answer.selected{border-color:#079c98;background:linear-gradient(145deg,#d9f9eb,#e7f8ff);box-shadow:0 4px 0 #93d7cb}
body[data-sp-experience=k12] .ix-page-quiz .answers button.answer.selected:before{content:"✓";display:inline-grid;place-items:center;flex:0 0 27px;width:27px;height:27px;background:#0a9e90;color:#fff;border-radius:50%}
body[data-sp-experience=k12] .ix-page-quiz .feedback{color:#1b5d68;font-weight:700}
body[data-sp-experience=k12] .ix-page-flashcards .flash-stage{border-color:#b5dfdb!important;min-height:410px}
body[data-sp-experience=k12] .ix-page-flashcards #flashcard:focus-visible{outline:3px solid #008d9f!important;outline-offset:5px}
body[data-sp-experience=k12] .ix-page-flashcards .deck-panel{background:linear-gradient(135deg,#effaf8,#fff)!important}
body[data-sp-experience=k12] .ix-page-flashcards .deck-item{display:flex;align-items:center;justify-content:space-between;width:100%;text-align:left;padding:11px 12px;border-radius:11px;background:#fff;border:1px solid #d1e5e6;margin-bottom:7px;color:#335e6d}
body[data-sp-experience=k12] .ix-page-flashcards .deck-item.active{background:#dffbf0;border-color:#5bc6b9;color:#076a70;font-weight:800}
body[data-sp-experience=k12] :is(.ix-page-materialview,.ix-page-lesson) :is(.reading-material,.lesson-content){min-width:0;line-height:1.75;background:#fff!important}
body[data-sp-experience=k12] :is(.ix-page-materialview,.ix-page-lesson) :is(.material-outline,.lesson-sidebar){background:linear-gradient(150deg,#f3fffb,#f7faff)!important}
body[data-sp-experience=k12] .ix-page-materialview .reading-material :is(h1,h2,h3),body[data-sp-experience=k12] .ix-page-lesson .lesson-content :is(h1,h2,h3){line-height:1.35;color:#175060;font-weight:800}
body[data-sp-experience=k12] :is(.ix-page-materialview,.ix-page-lesson) :is(.reading-material,.lesson-content) :is(a,button):focus-visible{outline:3px solid #078e9b!important;outline-offset:3px}
body[data-sp-experience=k12] .ix-page-assignmentview .assignment-brief{background:linear-gradient(145deg,#fff,#f6fffb)!important}
body[data-sp-experience=k12] .ix-page-assignmentview .response-card{background:#fff!important}
body[data-sp-experience=k12] .ix-page-courseview .course-score-card{border:1px solid #b8deda;border-radius:16px;padding:14px;background:#f2fffb}
body[data-sp-experience=k12] .ix-page-courseview .course-cover{border-radius:17px;overflow:hidden}
body[data-sp-experience=k12] .ix-page-courseview .course-cover img{object-fit:contain}
@media(max-width:720px){body[data-sp-experience=k12] .ix-page-quiz .answers{grid-template-columns:1fr}body[data-sp-experience=k12] .ix-page-quiz .answers button.answer{min-height:64px}}


/* K12 PAGE GROUP: GRADES PROGRESS CERTIFICATES */
/* Page 12 — real-course progress: visible milestone ring and subject achievements. */
body[data-sp-experience=k12] .ix-page-progress .k12-progress-hero{
  display:flex;align-items:center;gap:26px;
  background:linear-gradient(120deg,#dff8ef,#e8f8ff)!important;
  border:1px solid #a4d8d0!important;min-height:198px;padding:26px!important;
}
body[data-sp-experience=k12] .ix-page-progress .k12-progress-orbit{
  flex:0 0 146px;min-height:146px;width:146px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;box-shadow:0 5px 0 #a6dbd1,0 11px 17px #2a85851a;
  border:6px solid #fff;border-radius:50%;color:#126a78;font-weight:850;
}
body[data-sp-experience=k12] .ix-page-progress .k12-progress-orbit strong{font-size:32px;font-weight:900;color:#0c6878!important}
body[data-sp-experience=k12] .ix-page-progress .k12-progress-hero h2{color:#174454;font-size:clamp(23px,3vw,33px);font-weight:850}
body[data-sp-experience=k12] .ix-page-progress .k12-progress-course-rail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px}
body[data-sp-experience=k12] .ix-page-progress .k12-progress-course{
  border:1px solid #c8e3e5;border-radius:15px;display:flex;align-items:center;gap:14px;
  padding:16px;background:#fff;box-shadow:0 4px 0 #deeced;
  transition:border-color .18s,transform .18s;
}
body[data-sp-experience=k12] .ix-page-progress .k12-progress-course:hover{
  border-color:#5ab9ac;transform:translateY(-2px);
}
body[data-sp-experience=k12] .ix-page-progress .k12-progress-course strong{font-weight:800;color:#174857!important}
body[data-sp-experience=k12] .ix-page-progress .k12-progress-course-icon{width:48px;height:48px;flex:0 0 48px;display:grid;place-items:center;border-radius:13px;background:#ddf8ef;color:#117e83}
body[data-sp-experience=k12] .ix-page-progress .k12-progress-subject{
  border-bottom:1px solid #e0eff0;padding:15px 7px;gap:13px;
}
body[data-sp-experience=k12] .ix-page-progress .k12-progress-subject:last-child{border:0}
body[data-sp-experience=k12] .ix-page-progress .k12-progress-coach{
  background:linear-gradient(150deg,#fff6dd,#f0fff9)!important;
}
body[data-sp-experience=k12] .ix-page-progress .k12-progress-mascot{
  background:transparent;border:0;display:flex;align-items:center;justify-content:center;min-height:110px;
}
body[data-sp-experience=k12] .ix-page-progress .k12-progress-mascot img{
  max-height:125px;object-fit:contain;filter:drop-shadow(0 8px 10px #176f6822);
}
body[data-sp-experience=k12] .ix-page-progress #k12MasteryGrowth{
  background:linear-gradient(125deg,#fff,#f2fff8)!important;
}
/* Page 13 — grades: legible published records, paper-like feedback and clear bars. */
body[data-sp-experience=k12] .ix-page-grades .grade-hero{
  background:linear-gradient(115deg,#def8ed,#e9f8ff)!important;
  display:flex;gap:25px;align-items:center;justify-content:space-between;
}
body[data-sp-experience=k12] .ix-page-grades .grade-hero h2{
  font-size:clamp(23px,2.7vw,32px);font-weight:850;
}
body[data-sp-experience=k12] .ix-page-grades .overall-grade{
  border:1px solid #98d7cf;border-radius:18px;min-width:156px;
  padding:18px;background:#fff!important;text-align:center;
  box-shadow:0 4px 0 #b7e2d9;
}
body[data-sp-experience=k12] .ix-page-grades .overall-grade strong{
  font-size:clamp(27px,4vw,43px);color:#0b7e83!important;
}
body[data-sp-experience=k12] .ix-page-grades .grade-row{
  padding:13px 10px;border-bottom:1px solid #e3f0ef;
  border-radius:10px;transition:background .16s;
}
body[data-sp-experience=k12] .ix-page-grades .grade-row:hover{background:#edfbf7}
body[data-sp-experience=k12] .ix-page-grades .grade-row .grade-bar{border-radius:999px;background:#e4f3f1;overflow:hidden}
body[data-sp-experience=k12] .ix-page-grades .grade-row .grade-bar span{background:linear-gradient(90deg,#11a4a9,#83d46d)}
body[data-sp-experience=k12] .ix-page-grades .recent-feedback{background:linear-gradient(150deg,#fffdf5,#fff)!important}
body[data-sp-experience=k12] .ix-page-grades .feedback-item{padding:13px 0;border-bottom:1px solid #e3e9e9}
body[data-sp-experience=k12] .ix-page-grades .feedback-item:last-child{border:0}
body[data-sp-experience=k12] .ix-page-grades .trend-column span{background:linear-gradient(180deg,#26c3b5,#3c9ab4);border-radius:7px 7px 2px 2px}
body[data-sp-experience=k12] .ix-page-grades .learning-trend{background:#fff!important}
/* Page 14 — certificates: preserve authentic issue state and signed download links. */
body[data-sp-experience=k12] .ix-page-certificates .certificate-card{
  position:relative;border:2px solid #9fd8cb!important;
  outline:6px solid #ecf9f4;outline-offset:-17px;
  border-radius:19px!important;padding:clamp(24px,4vw,44px)!important;
  background:linear-gradient(135deg,#fffefa,#fff 55%,#f4fffb)!important;
  box-shadow:0 5px 0 #bee6d7,0 12px 25px #1b66651a!important;
}
body[data-sp-experience=k12] .ix-page-certificates .certificate-brand{font-weight:900;letter-spacing:.03em;color:#0d7c86}
body[data-sp-experience=k12] .ix-page-certificates .certificate-card h2{font-size:clamp(24px,3.4vw,42px);color:#0d5262!important;font-weight:850}
body[data-sp-experience=k12] .ix-page-certificates .certificate-card h3{color:#31745b!important}
body[data-sp-experience=k12] .ix-page-certificates .certificate-seal img{max-width:115px;max-height:115px;object-fit:contain}
body[data-sp-experience=k12] .ix-page-certificates .certificate-side{
  background:linear-gradient(145deg,#edfaff,#fff)!important;
}
body[data-sp-experience=k12] .ix-page-certificates .certificate-list-item{
  display:block;border:1px solid #c4e3e0;border-radius:12px;padding:13px;margin:8px 0;background:#fff;
}
body[data-sp-experience=k12] .ix-page-certificates .certificate-list-item:hover{background:#e7fbf4;border-color:#75c9b6}
html[data-k12-theme=dark] body[data-sp-experience=k12] :is(.ix-page-progress,.ix-page-grades,.ix-page-certificates) :is(.k12-progress-course,.overall-grade,.certificate-list-item){background:#1b3b45!important;color:#e9f8f8;border-color:#486a73}
@media(max-width:780px){body[data-sp-experience=k12] .ix-page-progress .k12-progress-course-rail{grid-template-columns:1fr}body[data-sp-experience=k12] .ix-page-progress .k12-progress-hero{flex-wrap:wrap}body[data-sp-experience=k12] .ix-page-grades .grade-hero{flex-wrap:wrap}}


/* K12 PAGE GROUP: CLASSROOM MESSAGES NOTIFICATIONS PROFILE */
/* Page 15 — school conversations retain their protected, scoped thread data. */
body[data-sp-experience=k12] .ix-page-messages .k12-message-layout{gap:20px}
body[data-sp-experience=k12] .ix-page-messages :is(.k12-message-list,.k12-message-conversation){min-height:410px;background:#fff!important}
body[data-sp-experience=k12] .ix-page-messages .k12-thread-card{
  width:100%;display:flex;align-items:center;gap:14px;text-align:left;
  border:1px solid #d6e8e7;border-radius:13px;padding:15px;
  margin:0 0 9px;background:#fff;color:#173e4b;transition:background .18s,border-color .18s;
}
body[data-sp-experience=k12] .ix-page-messages .k12-thread-card:hover{background:#f2fffa;border-color:#7bcabb}
body[data-sp-experience=k12] .ix-page-messages .k12-thread-card.unread{background:#eafaf4;border-color:#9bddd0}
body[data-sp-experience=k12] .ix-page-messages .k12-thread-avatar{
  display:grid;place-items:center;flex:0 0 45px;width:45px;height:45px;
  border-radius:14px;background:linear-gradient(130deg,#98eadc,#caefb6);color:#14566b;font-weight:800;
}
body[data-sp-experience=k12] .ix-page-messages .k12-thread-card p{margin:4px 0;font-size:13px;line-height:1.45}
body[data-sp-experience=k12] .ix-page-messages .k12-thread-card strong{font-size:14px}
body[data-sp-experience=k12] .ix-page-messages .k12-message-panel{
  border:1px solid #e0efef;border-radius:15px;background:#f9fcfc;padding:17px;
}
body[data-sp-experience=k12] .ix-page-messages .k12-message-reply{border-top:1px solid #d4e7e4;padding-top:14px}
/* Page 16 — notifications presented as readable, tappable updates. */
body[data-sp-experience=k12] .ix-page-notifications .k12-notification-shell{background:#fff!important}
body[data-sp-experience=k12] .ix-page-notifications .k12-notification-item{
  display:flex;gap:15px;align-items:center;padding:16px;
  margin:0 0 10px;border:1px solid #d3e6e8;border-radius:14px;
  background:#fff;transition:background .18s,border-color .18s;
}
body[data-sp-experience=k12] .ix-page-notifications .k12-notification-item.unread{
  border-color:#93d9d0;background:linear-gradient(115deg,#effff8,#eef8ff);
}
body[data-sp-experience=k12] .ix-page-notifications a.k12-notification-item:hover{
  background:#e9faf5;border-color:#6fbeaf;
}
body[data-sp-experience=k12] .ix-page-notifications .k12-notification-icon{
  flex:0 0 49px;display:grid;place-items:center;width:49px;height:49px;
  border-radius:14px;background:#e6f8f1;font-size:25px;
}
body[data-sp-experience=k12] .ix-page-notifications .k12-notification-item strong{font-weight:850;color:#215166}
body[data-sp-experience=k12] .ix-page-notifications .k12-notification-state{
  background:#e5f8e8;border:1px solid #bae4b5;border-radius:999px;
  color:#23783d;font-size:12px;font-weight:800;padding:5px 10px;
}
/* Page 17 — moderated classroom: tabs, posts, clear teacher-review state. */
body[data-sp-experience=k12] .ix-page-classroom .k12-classroom-shell{gap:20px}
body[data-sp-experience=k12] .ix-page-classroom :is(.k12-classroom-main,.k12-classroom-compose){background:#fff!important}
body[data-sp-experience=k12] .ix-page-classroom .k12-classroom-tabs{
  display:flex;gap:8px;flex-wrap:wrap;padding:9px;background:#effaf8;
  border:1px solid #d1e8e3;border-radius:14px;
}
body[data-sp-experience=k12] .ix-page-classroom .k12-classroom-tabs button{
  border:1px solid #bcdadf;border-radius:10px;padding:10px 14px;
  color:#126678;background:#fff;font-weight:800;min-height:42px;
}
body[data-sp-experience=k12] .ix-page-classroom .k12-classroom-tabs button.active{
  border-color:#078e96;background:#d9f7e7;color:#0a7179;
}
body[data-sp-experience=k12] .ix-page-classroom .k12-classroom-topic{
  border:1px solid #d0e5e4;border-radius:15px;padding:17px;margin:13px 0;background:#fff;
  box-shadow:0 3px 0 #ddeceb;
}
body[data-sp-experience=k12] .ix-page-classroom .k12-classroom-topic.is-pending{background:#fffdf5;border-color:#f1dfab}
body[data-sp-experience=k12] .ix-page-classroom .k12-classroom-topic-icon{
  display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;
  border-radius:12px;background:#e4f9f1;font-size:23px;
}
body[data-sp-experience=k12] .ix-page-classroom .k12-classroom-safety{
  border-radius:12px;padding:14px;background:#e8f8f1;color:#145e60;
}
/* Page 18 — avatar and protected school-managed personal information. */
body[data-sp-experience=k12] .ix-page-profile .profile-card{
  background:linear-gradient(150deg,#edfff8,#fff 80%)!important;text-align:center;
}
body[data-sp-experience=k12] .ix-page-profile .avatar-large{
  display:grid;place-items:center;border:5px solid #c2efe1;
  border-radius:50%;width:142px;height:142px;margin:0 auto 16px;
  box-shadow:0 5px 0 #b1ded0;overflow:hidden;background:#fff;
}
body[data-sp-experience=k12] .ix-page-profile .avatar-large img{width:100%;height:100%;object-fit:cover}
body[data-sp-experience=k12] .ix-page-profile .stats-row{display:flex;justify-content:center;gap:11px;flex-wrap:wrap}
body[data-sp-experience=k12] .ix-page-profile .mini-stat{
  min-width:91px;border:1px solid #d2e7de;border-radius:12px;padding:12px;background:#fff;
}
body[data-sp-experience=k12] .ix-page-profile .mini-stat strong{font-weight:850;color:#167b83;font-size:21px}
body[data-sp-experience=k12] .ix-page-profile .form-card{background:#fff!important}
body[data-sp-experience=k12] .ix-page-profile input:disabled,body[data-sp-experience=k12] .ix-page-profile select:disabled{
  color:#5d7480;background:#eef4f5!important;
}
html[data-k12-theme=dark] body[data-sp-experience=k12] :is(.ix-page-messages,.ix-page-notifications,.ix-page-classroom,.ix-page-profile) :is(.k12-thread-card,.k12-notification-item,.k12-classroom-topic,.mini-stat){background:#22434f;color:#e6f9f7;border-color:#476876}
@media(max-width:640px){body[data-sp-experience=k12] .ix-page-notifications .k12-notification-item{align-items:flex-start}body[data-sp-experience=k12] .ix-page-notifications .k12-notification-state{margin-left:auto}}


/* K12 PAGE GROUP: PLANNING GAMEPLAY SUPPORT SETTINGS BUILDER */
/* Page 19 — week calendar: day chips and genuine scheduled tasks. */
body[data-sp-experience=k12] .ix-page-calendar .k12-calendar-layout{gap:20px}
body[data-sp-experience=k12] .ix-page-calendar .k12-calendar-main{background:#fff!important}
body[data-sp-experience=k12] .ix-page-calendar .k12-calendar-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:9px;padding:13px;border-radius:15px;border:1px solid #d0e9e4;background:#effaf7}
body[data-sp-experience=k12] .ix-page-calendar .k12-calendar-day{
  min-height:74px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  border-radius:13px;border:1px solid #d5e6e8;background:#fff;color:#286074;
}
body[data-sp-experience=k12] .ix-page-calendar .k12-calendar-day.active{
  background:#d6f8e8;border:2px solid #33b7a4;color:#0d7378;font-weight:850;
}
body[data-sp-experience=k12] .ix-page-calendar .k12-calendar-agenda{margin-top:18px}
body[data-sp-experience=k12] .ix-page-calendar .k12-agenda-item{
  display:flex;gap:14px;padding:14px;border:1px solid #d2e7e9;border-radius:13px;
  background:#fff;margin:10px 0;
}
body[data-sp-experience=k12] .ix-page-calendar .k12-calendar-today{
  background:linear-gradient(135deg,#e6f8ff,#efffe9)!important;text-align:center;
}
body[data-sp-experience=k12] .ix-page-calendar .k12-calendar-sun{
  width:88px;height:88px;border-radius:50%;display:grid;place-items:center;
  margin:12px auto;background:#fff7ce;border:1px solid #e9df9a;
}
/* Pages 20-21 — game selection, scored mission state and safe learner mentor cards. */
body[data-sp-experience=k12] :is(.ix-page-arcade,.ix-page-game,.ix-page-mentors) .k12-live-panel{
  background:linear-gradient(130deg,#fff,#f2fffb)!important;min-height:240px;
}
body[data-sp-experience=k12] .ix-page-arcade .k12-game-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px;
}
body[data-sp-experience=k12] .ix-page-arcade .k12-game-card{
  min-height:184px;border:1px solid #bee2e0;border-radius:17px!important;
  padding:19px;background:linear-gradient(135deg,#eef9ff,#effdec);
  box-shadow:0 5px 0 #c4e4e0;transition:transform .18s,border-color .18s;
}
body[data-sp-experience=k12] .ix-page-arcade .k12-game-card:hover{transform:translateY(-2px);border-color:#72c6b6}
body[data-sp-experience=k12] .ix-page-game .k12-game-shell{
  border:2px solid #b8e6e1!important;background:linear-gradient(140deg,#fff,#f8fffc)!important;
  max-width:1100px;
}
body[data-sp-experience=k12] .ix-page-game .k12-game-shell :is(button,[role=button]):focus-visible{
  outline:3px solid #12a69e;outline-offset:3px;
}
body[data-sp-experience=k12] .ix-page-mentors .k12-mentor-card{
  background:#fff;border:1px solid #c9e5e5;border-radius:15px;padding:18px;
  box-shadow:0 3px 0 #e2eeee;
}
body[data-sp-experience=k12] .ix-page-mentors .k12-mentor-card:hover{border-color:#76c9bc}
/* Page 22 — learning support and consent-aware school-approved activities. */
body[data-sp-experience=k12] .ix-page-psychometric .k12-support-learning-grid{gap:22px}
body[data-sp-experience=k12] .ix-page-psychometric .k12-privacy-card{
  background:linear-gradient(140deg,#e8f8ff,#ecfff4)!important;
}
body[data-sp-experience=k12] .ix-page-psychometric .k12-privacy-art{
  display:grid;place-items:center;width:85px;height:85px;
  border-radius:20px;background:#d6f6e8;color:#0c8d86;margin-bottom:19px;
}
body[data-sp-experience=k12] .ix-page-psychometric .k12-support-learning-list> :is(article,a){
  display:block;border-radius:13px;border:1px solid #c5e0e0;background:#fff;padding:15px;margin:10px 0;
}
/* Page 23 — reading, motion and language preferences in accessible separate frames. */
body[data-sp-experience=k12] .ix-page-accessibility .k12-preference-grid{gap:19px}
body[data-sp-experience=k12] .ix-page-accessibility .k12-preference-card{
  background:#fff!important;border-top:5px solid #11a6a1!important;
  min-height:350px;
}
body[data-sp-experience=k12] .ix-page-accessibility .k12-preference-card:nth-child(2){border-top-color:#79cb67!important}
body[data-sp-experience=k12] .ix-page-accessibility .k12-preference-card:nth-child(3){border-top-color:#5eadd2!important}
body[data-sp-experience=k12] .ix-page-accessibility .k12-preference-card h2{color:#144b5d;font-weight:850}
body[data-sp-experience=k12] .ix-page-accessibility .k12-preference-card label{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
  padding:12px 0;border-bottom:1px solid #e6f0ef;
}
body[data-sp-experience=k12] .ix-page-accessibility .k12-preference-card label:last-of-type{border:0}
body[data-sp-experience=k12] .ix-page-accessibility .k12-switch-row input{width:20px;height:20px;accent-color:#0b9e94}
/* Page 24 — technical help desk and previous requests. */
body[data-sp-experience=k12] .ix-page-support .k12-support-grid{gap:22px}
body[data-sp-experience=k12] .ix-page-support .k12-support-compose{background:linear-gradient(145deg,#fff,#f8fffc)!important}
body[data-sp-experience=k12] .ix-page-support .k12-support-history{background:linear-gradient(145deg,#edfaff,#fff)!important}
body[data-sp-experience=k12] .ix-page-support .k12-support-compose label{
  display:flex;flex-direction:column;gap:8px;font-weight:750;margin:15px 0;
}
body[data-sp-experience=k12] .ix-page-support .k12-support-ticket{
  border:1px solid #cddfde;background:#fff;border-radius:13px;
  padding:14px;margin:12px 0;
}
body[data-sp-experience=k12] .ix-page-support .k12-ticket-status{
  border-radius:999px;background:#e3faec;color:#237647;padding:5px 9px;font-size:12px;font-weight:750;
}
/* Page 25 — self-study builder retains valid backend actions and clear structure. */
body[data-sp-experience=k12] .ix-page-personalcoursebuilder .k12-personal-builder-head{
  display:flex;justify-content:space-between;flex-wrap:wrap;align-items:center;gap:18px;
  background:linear-gradient(115deg,#e2f8f0,#ecf7ff)!important;
}
body[data-sp-experience=k12] .ix-page-personalcoursebuilder .k12-personal-builder-grid{gap:18px}
body[data-sp-experience=k12] .ix-page-personalcoursebuilder :is(.k12-personal-builder-outline,.k12-personal-builder-editor){
  background:#fff!important;
}
body[data-sp-experience=k12] .ix-page-personalcoursebuilder :is(.k12-builder-mini-form,.k12-builder-activity-form) label{
  display:flex;flex-direction:column;gap:7px;margin:10px 0;
}
body[data-sp-experience=k12] .ix-page-personalcoursebuilder :is(.k12-builder-outline-item,.k12-builder-activity-row){
  border:1px solid #cee6e2;border-radius:12px;padding:13px;margin:9px 0;background:#f8fffc;
}
body[data-sp-experience=k12] .ix-page-personalcoursebuilder .k12-personal-builder-ai[hidden]{display:none!important}
/* Page 26 — unavailable tutor stays honest: no fake chat controls. */
body[data-sp-experience=k12] .ix-page-tutor .ix-disabled-state{
  background:linear-gradient(130deg,#eef9ff,#f4fffa)!important;
  max-width:760px;text-align:center;padding:30px!important;margin:20px auto;
}
html[data-k12-theme=dark] body[data-sp-experience=k12] :is(.ix-page-support,.ix-page-accessibility,.ix-page-calendar,.ix-page-personalcoursebuilder) :is(.k12-support-ticket,.k12-preference-card,.k12-calendar-day,.k12-agenda-item){background:#213d49!important;color:#eef8f9;border-color:#416774}
@media(max-width:900px){body[data-sp-experience=k12] .ix-page-arcade .k12-game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){body[data-sp-experience=k12] .ix-page-calendar .k12-calendar-week{gap:4px;padding:8px}body[data-sp-experience=k12] .ix-page-calendar .k12-calendar-day{min-height:63px;font-size:12px}body[data-sp-experience=k12] .ix-page-arcade .k12-game-grid{grid-template-columns:1fr}}


/* K12 QUESTION PRACTICE WITH REAL PROGRESS RAIL */
body[data-sp-experience=k12] .ix-page-quiz .ixl-practice-grid{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:22px;align-items:start;margin:0 0 20px}
body[data-sp-experience=k12] .ix-page-quiz .ixl-practice-grid .quiz-card{max-width:none;min-height:390px;background:#fff!important;border:1px solid #d2e5e4!important;border-radius:18px!important}
body[data-sp-experience=k12] .ix-page-quiz .ixl-question-kicker{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:22px;color:#5e7880;font-size:11px;letter-spacing:1px;font-weight:800}
body[data-sp-experience=k12] .ix-page-quiz .ixl-question-kicker span:last-child{background:#effaf6;color:#096f7f;padding:7px 11px;border-radius:999px;border:1px solid #c4e2da;font-size:12px;letter-spacing:0}
body[data-sp-experience=k12] .ix-page-quiz .ixl-practice-rail{background:linear-gradient(155deg,#f3fffa,#f2faff)!important;border:1px solid #bedfda!important;padding:23px!important;position:sticky;top:95px}
body[data-sp-experience=k12] .ix-page-quiz .ixl-practice-rail-header{display:flex;align-items:center;gap:10px;margin-bottom:19px}
body[data-sp-experience=k12] .ix-page-quiz .ixl-practice-rail-header img{width:64px;height:64px;object-fit:contain}
body[data-sp-experience=k12] .ix-page-quiz .ixl-practice-rail-header h3{font-size:16px;line-height:1.35;margin:4px 0}
body[data-sp-experience=k12] .ix-page-quiz .ixl-quiz-metric{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 0;border-bottom:1px solid #d5e9e7;color:#486d79;font-size:13px}
body[data-sp-experience=k12] .ix-page-quiz .ixl-quiz-metric strong{color:#135e70;font-size:22px}
body[data-sp-experience=k12] .ix-page-quiz .ixl-quiz-metric small{font-size:12px;font-weight:600;color:#6b848d}
body[data-sp-experience=k12] .ix-page-quiz .ixl-quiz-progress-caption{display:flex;justify-content:space-between;gap:8px;margin:23px 0 9px;font-size:12px;color:#3b6a72}
body[data-sp-experience=k12] .ix-page-quiz .ixl-quiz-progress{height:11px;border-radius:999px;background:#d7ebe4;overflow:hidden}
body[data-sp-experience=k12] .ix-page-quiz .ixl-quiz-progress>span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#0ca7a0,#75c969);transition:width .2s}
body[data-sp-experience=k12] .ix-page-quiz .ixl-practice-rail>p{font-size:12px;line-height:1.6;margin:18px 0 0}
html[data-k12-theme=dark] body[data-sp-experience=k12] .ix-page-quiz .ixl-practice-grid :is(.quiz-card,.ixl-practice-rail){background:#203e49!important;border-color:#486d73!important}
html[data-k12-theme=dark] body[data-sp-experience=k12] .ix-page-quiz .ixl-practice-rail :is(h3,strong,span){color:#e8f9f8}
@media(max-width:980px){body[data-sp-experience=k12] .ix-page-quiz .ixl-practice-grid{grid-template-columns:1fr}body[data-sp-experience=k12] .ix-page-quiz .ixl-practice-rail{position:static;display:grid;grid-template-columns:1fr 1fr;gap:12px}body[data-sp-experience=k12] .ix-page-quiz .ixl-practice-rail-header,body[data-sp-experience=k12] .ix-page-quiz .ixl-practice-rail>p{grid-column:1/-1}}
@media(max-width:500px){body[data-sp-experience=k12] .ix-page-quiz .ixl-practice-rail{display:block}}