/* Gradeshuttle illustration system: flat, rounded, two-accent (hop green + sun), theme-aware. */
:root {
  --il-ink: #14213D; --il-paper: #FFFFFF; --il-mist: #E9EEF6; --il-line: #D3DAE7; --il-muted: #9AA4B8;
  --il-green: #1F9D6B; --il-green-soft: #D8F1E5; --il-sun: #F2B33D; --il-sun-soft: #FCEBC4;
  --il-blue: #3B5BDB; --il-blue-soft: #E1E8FD; --il-red: #D64545; --il-shadow: rgba(20,33,61,.09); --il-dot: #D9E0EC;
  --il-on-sun: #14213D; --il-on-green: #FFFFFF;
}
@media (prefers-color-scheme: dark) {
  :root {
    --il-ink: #E8ECF4; --il-paper: #1C2742; --il-mist: #26344F; --il-line: #36466B; --il-muted: #7E8AA5;
    --il-green: #3CC48C; --il-green-soft: #18412F; --il-sun: #F2B33D; --il-sun-soft: #4A3916;
    --il-blue: #8EA6FF; --il-blue-soft: #24325C; --il-red: #F07171; --il-shadow: rgba(0,0,0,.35); --il-dot: #24304A;
    --il-on-sun: #14213D; --il-on-green: #0F1626;
  }
}
.il { display: block; width: 100%; height: auto; overflow: visible; }
.il .paper { fill: var(--il-paper); } .il .mist { fill: var(--il-mist); } .il .muted { fill: var(--il-muted); }
.il .ink { fill: var(--il-ink); } .il .green { fill: var(--il-green); } .il .green-soft { fill: var(--il-green-soft); }
.il .sun { fill: var(--il-sun); } .il .sun-soft { fill: var(--il-sun-soft); } .il .blue-soft { fill: var(--il-blue-soft); }
.il .red { fill: var(--il-red); } .il .shadow { fill: var(--il-shadow); } .il .dot { fill: var(--il-dot); }
.il .s-line { stroke: var(--il-line); } .il .s-green { stroke: var(--il-green); } .il .s-blue { stroke: var(--il-blue); }
.il .s-ink { stroke: var(--il-ink); } .il .s-sun { stroke: var(--il-sun); } .il .s-muted { stroke: var(--il-muted); }
.il .s-paper { stroke: var(--il-paper); } .il .s-red { stroke: var(--il-red); } .il .s-on-green { stroke: var(--il-on-green); }
.il .nofill { fill: none; }
.il text { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight: 700; fill: var(--il-ink); }
.il .t-on-sun { fill: var(--il-on-sun); }
.il .t-on-green { fill: var(--il-on-green); }
.il .t-muted { fill: var(--il-muted); font-weight: 600; }

/* hero: grade chips hop along the arc */
.il-hero .chip { opacity: 0; animation: gh-hop 3.6s cubic-bezier(.45,.05,.35,1) infinite; }
.il-hero .chip.c2 { animation-delay: 1.2s; }
.il-hero .chip.c3 { animation-delay: 2.4s; }
@keyframes gh-hop {
  0%     { transform: translate(120px, 70px) scale(.85); opacity: 0; }
  6%     { opacity: 1; }
  12.5%  { transform: translate(130.3px, 49.7px); }
  25%    { transform: translate(140.4px, 35.1px); }
  37.5%  { transform: translate(150.2px, 26.4px); }
  50%    { transform: translate(160px, 23.5px) scale(1.06); }
  62.5%  { transform: translate(169.8px, 26.4px); }
  75%    { transform: translate(179.6px, 35.1px); }
  87.5%  { transform: translate(189.7px, 49.7px); }
  94%    { opacity: 1; }
  100%   { transform: translate(200px, 70px) scale(.85); opacity: 0; }
}
.il-hero .pending { animation: gh-pulse 1.2s ease-in-out infinite; }
@keyframes gh-pulse { 50% { opacity: .35; } }

/* ripple under a cursor */
.il .ripple { transform-box: fill-box; transform-origin: center; animation: gh-ripple 1.8s ease-out infinite; }
.il .ripple.r2 { animation-delay: .6s; }
@keyframes gh-ripple { 0% { transform: scale(.4); opacity: .7; } 100% { transform: scale(1.8); opacity: 0; } }

/* picking: the cursor walks down the column */
.il-pick .cursor { animation: gh-walk 3.2s ease-in-out infinite; }
@keyframes gh-walk { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(0, 36px); } 66% { transform: translate(0, 18px); } }

/* success: rays burst, check draws itself */
.il-success .ray { transform-box: view-box; transform-origin: 70px 58px; animation: gh-burst .7s cubic-bezier(.2,.8,.2,1) both .1s; }
.il-success .check { stroke-dasharray: 60; stroke-dashoffset: 60; animation: gh-draw .45s ease-out forwards .2s; }
.il-success .disc { transform-box: fill-box; transform-origin: center; animation: gh-pop .45s cubic-bezier(.2,1.4,.4,1) both; }
.il-success .confetti { transform-box: fill-box; transform-origin: center; animation: gh-fall 1.1s ease-out both .15s; }
@keyframes gh-burst { 0% { transform: scale(.5); opacity: 0; } 60% { opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes gh-draw { to { stroke-dashoffset: 0; } }
@keyframes gh-pop { 0% { transform: scale(.4); } 100% { transform: scale(1); } }
@keyframes gh-fall { 0% { transform: translateY(-10px) rotate(0deg); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(0) rotate(160deg); opacity: 1; } }

/* sparkles twinkle */
.il .twinkle { transform-box: fill-box; transform-origin: center; animation: gh-twinkle 2.4s ease-in-out infinite; }
.il .twinkle.t2 { animation-delay: .8s; } .il .twinkle.t3 { animation-delay: 1.6s; }
@keyframes gh-twinkle { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.55); opacity: .5; } }

/* gentle float for the upgrade cards */
.il-upgrade .float { animation: gh-float 4s ease-in-out infinite; }
@keyframes gh-float { 50% { transform: translateY(-4px); } }

@media (prefers-reduced-motion: reduce) {
  .il *, .il { animation: none !important; }
  .il-hero .chip.c2 { opacity: 1; transform: translate(160px, 23.5px); }
  .il-success .check { stroke-dashoffset: 0; }
}