.home-learning-spin-block{
  position:relative;
  overflow:hidden;
  margin-top:18px;
  isolation:isolate;
}

#homePanel .home-learning-spin-block > *{
  position:relative;
  z-index:1;
}

#homePanel .home-learning-spin-block::before{
  content:"";
  position:absolute;
  inset:-24% auto auto -12%;
  width:220px;
  height:220px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(108,150,255,.2) 0%, rgba(108,150,255,0) 72%);
  pointer-events:none;
}

#homePanel .home-learning-spin-block::after{
  content:"";
  position:absolute;
  inset:10px 18px auto auto;
  width:132px;
  height:132px;
  border-radius:28px;
  border:1px solid rgba(154,188,255,.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,0) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  opacity:.56;
  transform:rotate(10deg);
  pointer-events:none;
}

.home-learning-spin-shell{
  position:relative;
  display:grid;
  grid-template-columns:minmax(240px, .84fr) minmax(0, 1.16fr);
  gap:16px;
  align-items:stretch;
  margin-top:14px;
  padding:16px;
  border-radius:28px;
  border:1px solid rgba(126,160,235,.16);
  background:
    linear-gradient(180deg, rgba(14,21,39,.92) 0%, rgba(10,16,30,.96) 100%);
  box-shadow:
    0 24px 44px rgba(6,10,22,.22),
    inset 0 1px 0 rgba(255,255,255,.05);
  overflow:hidden;
}

.home-learning-spin-shell::before{
  content:"";
  position:absolute;
  inset:auto auto -58px -36px;
  width:188px;
  height:188px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(109,162,255,.16) 0%, rgba(109,162,255,0) 74%);
  pointer-events:none;
  z-index:0;
}

.home-learning-spin-controls{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
  padding:16px;
  border-radius:22px;
  border:1px solid rgba(145,176,255,.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,.045) 0%, rgba(255,255,255,.025) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  z-index:1;
}

.home-learning-spin-button{
  position:relative;
  min-height:54px;
  justify-content:center;
  padding:0 22px;
  border:0;
  cursor:pointer;
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(244,249,255,.98) 0%, rgba(209,224,255,.95) 100%);
  color:#11213f;
  box-shadow:
    0 18px 28px rgba(20,42,86,.22),
    inset 0 1px 0 rgba(255,255,255,.85);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.home-learning-spin-button::before{
  content:"";
  position:absolute;
  inset:0 auto 0 -30%;
  width:38%;
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.58) 50%, rgba(255,255,255,0) 100%);
  transform:skewX(-18deg);
  opacity:.68;
  pointer-events:none;
  transition:transform .46s ease;
}

.home-learning-spin-button:hover{
  transform:translateY(-2px);
  box-shadow:
    0 22px 34px rgba(20,42,86,.28),
    inset 0 1px 0 rgba(255,255,255,.9);
}

.home-learning-spin-button:hover::before{
  transform:translateX(210%) skewX(-18deg);
}

.home-learning-spin-button:active{
  transform:translateY(0);
  box-shadow:
    0 10px 18px rgba(20,42,86,.22),
    inset 0 1px 0 rgba(255,255,255,.74);
}

.home-learning-spin-button[aria-busy="true"]::before{
  animation:homeLearningSpinSweep 1.15s linear infinite;
}

.home-learning-spin-button[disabled]{
  cursor:default;
  opacity:.82;
  filter:saturate(.94);
}

.home-learning-spin-note{
  color:rgba(228,237,255,.82);
  font-size:.92rem;
  line-height:1.55;
  max-inline-size:28rem;
  text-wrap:pretty;
}

.home-learning-spin-result{
  --spin-accent: rgba(125,177,255,.22);
  --spin-accent-soft: rgba(125,177,255,.08);
  --spin-chip: rgba(255,255,255,.06);
  position:relative;
  display:flex;
  flex-direction:column;
  gap:11px;
  min-height:222px;
  padding:19px 19px 17px;
  border-radius:24px;
  border:1px solid rgba(134,168,255,.24);
  background:
    linear-gradient(160deg, rgba(19,30,55,.98) 0%, rgba(11,19,37,.99) 100%);
  box-shadow:
    0 22px 40px rgba(5,10,22,.3),
    inset 0 1px 0 rgba(255,255,255,.08);
  isolation:isolate;
  transform:translateZ(0);
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
  overflow:hidden;
  z-index:1;
}

.home-learning-spin-result::before{
  content:"";
  position:absolute;
  inset:0 auto 0 -34%;
  width:38%;
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.14) 48%, rgba(255,255,255,0) 100%);
  transform:skewX(-16deg);
  opacity:0;
  pointer-events:none;
  z-index:0;
}

.home-learning-spin-result::after{
  content:"";
  position:absolute;
  inset:auto -10% -42% auto;
  width:180px;
  height:180px;
  border-radius:999px;
  background:radial-gradient(circle, var(--spin-accent) 0%, rgba(103,195,255,0) 72%);
  pointer-events:none;
  z-index:-1;
}

.home-learning-spin-result.is-spinning{
  border-color:rgba(142,193,255,.42);
  box-shadow:
    0 24px 44px rgba(8,15,32,.34),
    0 0 0 1px rgba(142,193,255,.14),
    inset 0 1px 0 rgba(255,255,255,.1);
}

.home-learning-spin-result.is-spinning::before{
  opacity:1;
  animation:homeLearningSpinSweep 1.05s linear infinite;
}

.home-learning-spin-result.is-settled{
  border-color:rgba(172,205,255,.4);
  box-shadow:
    0 26px 46px rgba(8,15,32,.36),
    0 0 0 1px rgba(172,205,255,.18),
    0 0 32px rgba(91,148,255,.14),
    inset 0 1px 0 rgba(255,255,255,.12);
}

.home-learning-spin-result.is-settled .home-learning-spin-mode,
.home-learning-spin-result.is-settled .home-learning-spin-type{
  transform:translateY(-1px);
}

.home-learning-spin-result[data-spin-group="lesson"]{
  --spin-accent: rgba(112,164,255,.2);
  --spin-accent-soft: rgba(112,164,255,.09);
}

.home-learning-spin-result[data-spin-group="checklist"]{
  --spin-accent: rgba(94,214,186,.2);
  --spin-accent-soft: rgba(94,214,186,.09);
}

.home-learning-spin-result[data-spin-group="review"]{
  --spin-accent: rgba(244,198,104,.2);
  --spin-accent-soft: rgba(244,198,104,.09);
}

.home-learning-spin-result[data-spin-group="deep"]{
  --spin-accent: rgba(192,139,255,.2);
  --spin-accent-soft: rgba(192,139,255,.09);
}

.home-learning-spin-result > *{
  position:relative;
  z-index:1;
}

.home-learning-spin-kicker{
  color:#b7caf8;
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
}

.home-learning-spin-head{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.home-learning-spin-type{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(151,180,255,.2);
  background:var(--spin-chip);
  color:#eef4ff;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.02em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .2s ease, border-color .2s ease, background .2s ease;
}

.home-learning-spin-mode{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 12px;
  border-radius:999px;
  background:var(--spin-accent-soft);
  border:1px solid var(--spin-accent);
  color:#f4f8ff;
  font-size:.8rem;
  font-weight:800;
  letter-spacing:.02em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .2s ease, border-color .2s ease, background .2s ease;
}

.home-learning-spin-title{
  color:#f8fbff;
  font-size:clamp(1.1rem, 1rem + .54vw, 1.48rem);
  line-height:1.22;
  font-weight:800;
  max-inline-size:24ch;
  text-wrap:balance;
}

.home-learning-spin-body{
  color:rgba(232,239,255,.9);
  font-size:.97rem;
  line-height:1.62;
  max-inline-size:56ch;
  text-wrap:pretty;
}

.home-learning-spin-mission{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:2px;
  padding:13px 14px;
  border-radius:18px;
  border:1px solid rgba(155,184,255,.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.035) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  color:inherit;
  text-decoration:none;
  cursor:pointer;
  transition:transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.home-learning-spin-mission:hover{
  transform:translateY(-1px);
  border-color:rgba(174,201,255,.26);
  background:
    linear-gradient(180deg, rgba(255,255,255,.065) 0%, rgba(255,255,255,.045) 100%);
  box-shadow:
    0 14px 24px rgba(7,13,26,.16),
    inset 0 1px 0 rgba(255,255,255,.06);
}

.home-learning-spin-mission:focus-visible{
  outline:2px solid rgba(195,218,255,.8);
  outline-offset:3px;
}

.home-learning-spin-mission[aria-disabled="true"]{
  cursor:default;
  pointer-events:none;
}

.home-learning-spin-mission-title{
  color:#d7e4ff;
  font-size:.8rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.home-learning-spin-mission-body{
  color:rgba(235,241,255,.9);
  font-size:.93rem;
  line-height:1.58;
  text-wrap:pretty;
}

.home-learning-spin-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:auto;
  padding-top:6px;
  align-items:stretch;
}

.home-learning-spin-action{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 15px;
  border-radius:14px;
  border:1px solid rgba(145,176,255,.2);
  background:rgba(255,255,255,.05);
  color:#eef5ff;
  text-decoration:none;
  font-size:.92rem;
  font-weight:700;
  line-height:1.3;
  text-align:center;
  box-shadow:0 12px 22px rgba(7,13,26,.18);
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.home-learning-spin-action::before{
  content:"";
  position:absolute;
  inset:0 auto 0 -34%;
  width:34%;
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.34) 50%, rgba(255,255,255,0) 100%);
  transform:skewX(-18deg);
  opacity:0;
  pointer-events:none;
}

.home-learning-spin-action:hover{
  transform:translateY(-1px);
  border-color:rgba(167,194,255,.32);
  box-shadow:0 16px 24px rgba(7,13,26,.24);
}

.home-learning-spin-action:hover::before{
  opacity:.64;
  animation:homeLearningSpinSweep .9s linear 1;
}

.home-learning-spin-action.is-primary{
  background:linear-gradient(180deg, rgba(236,244,255,.98) 0%, rgba(202,220,255,.95) 100%);
  color:#10203c;
  border-color:rgba(220,232,255,.84);
  box-shadow:0 14px 26px rgba(24,48,94,.28);
}

.home-learning-spin-action.is-primary:hover{
  box-shadow:0 18px 30px rgba(24,48,94,.34);
}

.home-learning-spin-action.is-deep{
  background:rgba(96,146,255,.12);
}

.home-learning-spin-last{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  align-self:flex-start;
  min-height:38px;
  padding:0 14px;
  border-radius:12px;
  border:1px solid rgba(146,176,255,.18);
  background:rgba(255,255,255,.04);
  color:#ebf2ff;
  font-size:.88rem;
  font-weight:700;
  line-height:1.3;
  cursor:pointer;
  transition:transform .18s ease, border-color .18s ease, background .18s ease;
}

.home-learning-spin-last:hover{
  transform:translateY(-1px);
  border-color:rgba(168,195,255,.28);
  background:rgba(255,255,255,.07);
}

.home-learning-spin-last-note{
  color:rgba(218,228,250,.72);
  font-size:.84rem;
  line-height:1.5;
  text-wrap:pretty;
}

@media (max-width: 900px){
  .home-learning-spin-shell{
    grid-template-columns:1fr;
    padding:14px;
  }

  .home-learning-spin-note{
    max-inline-size:none;
  }

  .home-learning-spin-controls{
    padding:14px;
  }

  .home-learning-spin-result{
    min-height:0;
  }
}

@media (max-width: 640px){
  .home-learning-spin-block::after,
  .home-learning-spin-shell::before{
    display:none;
  }

  .home-learning-spin-shell{
    gap:12px;
    padding:12px;
  }

  .home-learning-spin-title{
    max-inline-size:none;
  }

  .home-learning-spin-controls,
  .home-learning-spin-result{
    padding:14px;
    border-radius:20px;
  }

  .home-learning-spin-actions{
    flex-direction:column;
  }

  .home-learning-spin-action,
  .home-learning-spin-button{
    width:100%;
  }

  .home-learning-spin-last{
    width:100%;
  }

  .home-learning-spin-body{
    font-size:.95rem;
    line-height:1.58;
  }

  .home-learning-spin-head{
    gap:8px;
  }

  .home-learning-spin-mode,
  .home-learning-spin-type{
    min-height:26px;
    font-size:.78rem;
  }

  .home-learning-spin-mission{
    padding:12px 13px;
  }

  .home-learning-spin-last-note{
    font-size:.82rem;
  }
}

@media (prefers-reduced-motion: reduce){
  .home-learning-spin-button::before,
  .home-learning-spin-result::before,
  .home-learning-spin-action::before{
    animation:none !important;
    transition:none !important;
  }

  .home-learning-spin-result,
  .home-learning-spin-action,
  .home-learning-spin-button{
    transition:none;
  }
}

@keyframes homeLearningSpinSweep{
  from{
    transform:translateX(0) skewX(-18deg);
  }
  to{
    transform:translateX(320%) skewX(-18deg);
  }
}