html,
    body,
    #root {
      height: 100%;
    }

    body {
      font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
      margin: 0;
    }

    @keyframes heartbeat {

      0%,
      100% {
        transform: scale(1);
      }

      14% {
        transform: scale(1.3);
      }

      28% {
        transform: scale(1);
      }

      42% {
        transform: scale(1.3);
      }

      70% {
        transform: scale(1);
      }
    }

    .heart-beat {
      display: inline-block;
      animation: heartbeat 1.3s ease-in-out infinite;
      transform-origin: center;
      filter: drop-shadow(0 0 8px rgba(244, 63, 94, 0.5));
    }

    body {
      font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
      font-feature-settings: "cv11", "ss01", "ss03";
    }

    body.quiz-active {
      overflow: hidden;
    }

    /* Subtle film-grain overlay */
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 9999;
      opacity: 0.12;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
      background-size: 200px 200px;
    }

    .font-mono-ui {
      font-family: 'JetBrains Mono', ui-monospace, monospace;
    }

    /* Glassmorphism card */
    .glass-card {
      background: rgba(15, 23, 42, 0.55);
      backdrop-filter: blur(20px) saturate(140%);
      -webkit-backdrop-filter: blur(20px) saturate(140%);
      border: 1px solid rgba(255, 255, 255, 0.08);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 30px 60px -20px rgba(0, 0, 0, 0.6),
        0 10px 25px -10px rgba(0, 0, 0, 0.5);
    }

    .glass-card-light {
      background: rgba(255, 255, 255, 0.72);
      backdrop-filter: blur(20px) saturate(140%);
      -webkit-backdrop-filter: blur(20px) saturate(140%);
      border: 1px solid rgba(15, 23, 42, 0.08);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 20px 40px -20px rgba(15, 23, 42, 0.15),
        0 8px 20px -10px rgba(15, 23, 42, 0.1);
    }

    /* Page transition */
    @keyframes screenIn {
      from {
        opacity: 0;
        transform: translateY(12px) scale(0.99);
        filter: blur(4px);
      }

      to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
      }
    }

    .screen-in {
      animation: screenIn 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    /* Option pill */
    .opt-pill {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      text-align: left;
      transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s, background 0.2s, border-color 0.2s;
    }

    .opt-pill:hover:not(:disabled) {
      transform: translateY(-2px) rotate(-0.3deg);
    }

    .opt-pill:active:not(:disabled) {
      transform: translateY(0) scale(0.99);
    }

    .opt-badge {
      flex-shrink: 0;
      width: 2rem;
      height: 2rem;
      border-radius: 9999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: 0.875rem;
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      transition: transform 0.2s, background 0.2s;
    }

    .opt-pill:hover:not(:disabled) .opt-badge {
      transform: scale(1.08);
    }

    /* Progress ring */
    .ring-track {
      stroke: currentColor;
      opacity: 0.15;
    }

    .ring-fill {
      stroke: currentColor;
      transition: stroke-dashoffset 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* Course tile spotlight — dim others when one is hovered */
    .courses-grid:has(.course-tile:hover) .course-tile:not(:hover) {
      opacity: 0.55;
      filter: saturate(0.65);
    }

    .course-tile {
      transition: opacity 0.25s, filter 0.25s, transform 0.2s, box-shadow 0.25s;
    }

    .course-tile:hover {
      transform: translateY(-3px) scale(1.1);
      box-shadow: 0 22px 55px -12px var(--tile-accent, rgba(163, 255, 92, 0.3));
      z-index: 2;
    }

    /* Week tile themed hover */
    .week-pill {
      transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
    }

    .week-pill:not(.selected):hover:not(:disabled) {
      background: color-mix(in srgb, var(--accent, #a3ff5c) 12%, transparent);
      border-color: color-mix(in srgb, var(--accent, #a3ff5c) 55%, transparent);
      color: var(--accent, #a3ff5c);
      transform: translateY(-1px);
    }

    .week-pill.selected {
      background: color-mix(in srgb, var(--accent, #a3ff5c) 18%, transparent);
      border-color: var(--accent, #a3ff5c);
      color: var(--accent, #a3ff5c);
    }

    .week-pill.aced {
      background: rgba(16, 185, 129, 0.12);
      border-color: rgba(16, 185, 129, 0.55);
      color: #34d399;
    }

    .week-pill.aced:not(:disabled):hover {
      background: rgba(16, 185, 129, 0.2);
      border-color: rgba(16, 185, 129, 0.8);
      color: #6ee7b7;
    }

    .aced-badge {
      background: #10b981;
      color: #ffffff;
    }

    .grad-green {
      background: linear-gradient(90deg, #a3ff5c 0%, #4ade80 50%, #22d3a3 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .hero-pill {
      transition: border-color .3s ease, box-shadow .3s ease, transform .25s ease, background-color .25s ease;
    }
    .hero-pill:hover {
      border-color: rgba(163, 255, 92, 0.55) !important;
      box-shadow: 0 0 0 1px rgba(163, 255, 92, 0.25), 0 0 28px rgba(163, 255, 92, 0.22), 0 0 56px rgba(163, 255, 92, 0.1);
    }

    /* Typewriter caret */
    @keyframes caret-blink {

      0%,
      100% {
        opacity: 1;
      }

      50% {
        opacity: .15;
      }
    }

    .caret {
      display: inline-block;
      width: .08em;
      height: 1em;
      background: #a3ff5c;
      margin-left: .06em;
      vertical-align: -0.12em;
      animation: caret-blink 1.4s ease-in-out infinite;
      box-shadow: 0 0 10px rgba(163, 255, 92, .7);
    }

    /* Staggered fade-up entrance */
    @keyframes fade-up {
      0% {
        opacity: 0;
        transform: translateY(18px);
      }

      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .fade-up {
      opacity: 0;
      animation: fade-up .7s cubic-bezier(.22, 1, .36, 1) forwards;
    }

    /* Week tile cascade */
    @keyframes tile-in {
      0% {
        opacity: 0;
        transform: translateY(10px) scale(.9);
      }

      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    .tile-in {
      opacity: 0;
      animation: tile-in .5s cubic-bezier(.22, 1, .36, 1) forwards;
    }


    .divider-line {
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(251, 146, 60, 0.5), transparent);
    }

    .fav-mark {
      position: relative;
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background:
        radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .25), transparent 55%),
        linear-gradient(160deg, #4ade80 0%, #22c55e 55%, #16a34a 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      box-shadow:
        0 4px 12px rgba(34, 197, 94, .4),
        0 2px 4px rgba(34, 197, 94, .25),
        inset 0 1px 0 rgba(255, 255, 255, .3),
        inset 0 -2px 0 rgba(0, 0, 0, .12);
      transition:
        transform 450ms cubic-bezier(.2, .8, .2, 1),
        box-shadow 450ms ease,
        border-radius 450ms ease;
    }

    .fav-mark::before {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: -90%;
      width: 60%;
      background: linear-gradient(100deg,
          transparent 0%,
          rgba(255, 255, 255, 0) 30%,
          rgba(255, 255, 255, .5) 50%,
          rgba(255, 255, 255, 0) 70%,
          transparent 100%);
      transform: skewX(-18deg);
      transition: left 850ms cubic-bezier(.2, .8, .2, 1);
      pointer-events: none;
      z-index: 1;
    }

    .fav-mark .q-letter {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      font-family: 'Inter', system-ui, sans-serif;
      font-size: 26px;
      font-weight: 900;
      line-height: 1;
      letter-spacing: -0.04em;
      color: rgba(255, 255, 255, .15);
      pointer-events: none;
      transition: transform 450ms cubic-bezier(.2, .8, .2, 1), color 450ms;
      z-index: 1;
    }

    .fav-mark svg {
      position: relative;
      z-index: 2;
      filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .25));
      transition: transform 450ms cubic-bezier(.2, .8, .2, 1);
    }

    .fav-mark svg .check {
      stroke: #fff;
      stroke-width: 3.5;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
      stroke-dasharray: 30;
      stroke-dashoffset: 30;
      animation: drawCheck 1.2s cubic-bezier(.2, .8, .2, 1) .25s forwards;
    }

    @keyframes drawCheck {
      to {
        stroke-dashoffset: 0;
      }
    }

    .fav-mark .ripple {
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      opacity: 0;
    }

    button:hover>.fav-mark {
      transform: translateY(-3px) scale(1.06) rotate(-4deg);
      border-radius: 11px;
      box-shadow:
        0 10px 22px rgba(34, 197, 94, .55),
        0 4px 10px rgba(34, 197, 94, .35),
        inset 0 1px 0 rgba(255, 255, 255, .4),
        inset 0 -2px 0 rgba(0, 0, 0, .12);
    }

    button:hover>.fav-mark::before {
      left: 130%;
    }

    button:hover>.fav-mark .q-letter {
      transform: translateX(-50%) rotate(6deg);
      color: rgba(255, 255, 255, .22);
    }

    button:hover>.fav-mark svg {
      transform: scale(1.12) rotate(4deg);
    }

    button:active>.fav-mark {
      transform: translateY(-1px) scale(.97) rotate(0deg);
      transition-duration: 140ms;
    }

    @keyframes favRipple {
      0% {
        opacity: .85;
        box-shadow: inset 0 0 0 0 rgba(255, 255, 255, .6);
      }

      100% {
        opacity: 0;
        box-shadow: inset 0 0 0 30px rgba(255, 255, 255, 0);
      }
    }

    @keyframes favBump {
      0% {
        transform: translateY(-3px) scale(1.06) rotate(-4deg);
      }

      40% {
        transform: translateY(-1px) scale(.94) rotate(0deg);
      }

      100% {
        transform: translateY(-3px) scale(1.06) rotate(-4deg);
      }
    }

    .fav-mark.clicked {
      animation: favBump 450ms cubic-bezier(.2, .8, .2, 1);
    }

    .fav-mark.clicked .ripple {
      animation: favRipple 700ms ease-out;
    }

    .fav-mark.clicked svg .check {
      stroke-dashoffset: 30;
      animation: drawCheck 500ms cubic-bezier(.2, .8, .2, 1) forwards;
    }

    .cursor-glow {
      position: fixed;
      top: 0;
      left: 0;
      width: 560px;
      height: 560px;
      border-radius: 50%;
      pointer-events: none;
      background: radial-gradient(circle, rgba(163, 255, 92, 0.22) 0%, rgba(74, 222, 128, 0.09) 35%, rgba(34, 211, 163, 0) 70%);
      filter: blur(44px);
      z-index: 0;
      opacity: 0;
      transition: opacity .4s ease, width .35s ease, height .35s ease;
      will-change: transform;
    }

    .cursor-ring {
      position: fixed;
      top: 0;
      left: 0;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      pointer-events: none;
      border: 1.5px solid rgba(163, 255, 92, 0.55);
      box-shadow: 0 0 12px rgba(163, 255, 92, 0.25), inset 0 0 10px rgba(163, 255, 92, 0.15);
      z-index: 1;
      opacity: 0;
      transition: opacity .25s ease, width .25s ease, height .25s ease, border-color .25s ease, background-color .25s ease;
      will-change: transform;
      mix-blend-mode: screen;
    }

    .cursor-dot {
      position: fixed;
      top: 0;
      left: 0;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      pointer-events: none;
      background: #a3ff5c;
      box-shadow: 0 0 14px 3px rgba(163, 255, 92, 0.7);
      z-index: 2;
      opacity: 0;
      transition: opacity .2s ease, width .2s ease, height .2s ease;
      mix-blend-mode: screen;
    }

    .cursor-glow.active,
    .cursor-dot.active,
    .cursor-ring.active {
      opacity: 1;
    }

    .cursor-glow.hovering {
      width: 720px;
      height: 720px;
    }

    .cursor-ring.hovering {
      width: 64px;
      height: 64px;
      border-color: rgba(163, 255, 92, 0.9);
      background: rgba(163, 255, 92, 0.08);
    }

    .cursor-dot.hovering {
      width: 4px;
      height: 4px;
    }

    .cursor-glow.clicking {
      width: 380px;
      height: 380px;
    }

    .cursor-ring.clicking {
      width: 30px;
      height: 30px;
      border-color: rgba(163, 255, 92, 1);
    }

    @media (hover: none) {

      .cursor-glow,
      .cursor-dot,
      .cursor-ring {
        display: none;
      }
    }

    .foot-row {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .5em;
    }

    .foot-swap {
      position: relative;
      display: inline-block;
      width: 10ch;
      height: 1.2em;
      overflow: hidden;
      text-align: center;
    }

    .foot-swap .foot-txt {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      white-space: nowrap;
      line-height: 1.2em;
      transition: opacity .5s ease, transform .55s cubic-bezier(.22, 1, .36, 1), filter .45s ease;
      will-change: transform, opacity;
    }

    .foot-swap .foot-a {
      opacity: 1;
      transform: translateY(0);
    }

    .foot-swap .foot-b {
      opacity: 0;
      transform: translateY(100%);
      filter: blur(3px);
    }

    footer:hover .foot-swap .foot-a {
      opacity: 0;
      transform: translateY(-100%);
      filter: blur(3px);
    }

    footer:hover .foot-swap .foot-b {
      opacity: 1;
      transform: translateY(0);
      filter: blur(0);
    }

    .by-name {
      background: linear-gradient(90deg, #a3ff5c 0%, #4ade80 50%, #22d3a3 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      font-weight: 700;
    }

    .dev-id {
      cursor: pointer;
      user-select: none;
      transition: filter .2s, transform .15s;
      animation: revealIn .55s cubic-bezier(.22, 1, .36, 1);
    }

    .dev-id:hover {
      filter: brightness(1.15);
    }

    .dev-id:active {
      transform: scale(.94);
    }

    .secret-backdrop {
      position: fixed;
      inset: 0;
      z-index: 100;
      background: rgba(0, 0, 0, .55);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      animation: secretFade .35s ease;
    }

    .secret-card {
      position: relative;
      max-width: 360px;
      width: 100%;
      padding: 36px 28px 24px;
      border-radius: 24px;
      background:
        radial-gradient(ellipse at 20% 0%, rgba(163, 255, 92, .18), transparent 60%),
        linear-gradient(160deg, #111827 0%, #0b1220 100%);
      border: 1px solid rgba(163, 255, 92, .25);
      box-shadow:
        0 24px 64px rgba(0, 0, 0, .55),
        0 0 0 1px rgba(163, 255, 92, .1),
        inset 0 1px 0 rgba(255, 255, 255, .05);
      text-align: center;
      animation: secretPop .5s cubic-bezier(.22, 1, .36, 1);
    }

    .secret-emoji {
      font-size: 44px;
      line-height: 1;
      margin-bottom: 10px;
      animation: secretFloat 3s ease-in-out infinite;
    }

    .secret-title {
      font-size: 24px;
      font-weight: 800;
      background: linear-gradient(90deg, #a3ff5c 0%, #4ade80 50%, #22d3a3 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      margin-bottom: 6px;
    }

    .secret-smile {
      -webkit-text-fill-color: #a3ff5c;
    }

    .secret-sub {
      font-size: 13px;
      color: #94a3b8;
      margin-bottom: 22px;
      letter-spacing: .04em;
    }

    .secret-close {
      background: rgba(163, 255, 92, .1);
      border: 1px solid rgba(163, 255, 92, .3);
      color: #a3ff5c;
      padding: 8px 20px;
      border-radius: 999px;
      font: inherit;
      font-weight: 600;
      font-size: 13px;
      cursor: pointer;
      transition: background .2s, border-color .2s, transform .15s;
    }

    .secret-close:hover {
      background: rgba(163, 255, 92, .18);
      border-color: rgba(163, 255, 92, .5);
    }

    .secret-close:active {
      transform: scale(.96);
    }

    @keyframes secretFade {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }

    @keyframes secretPop {
      0% {
        opacity: 0;
        transform: translateY(16px) scale(.92);
        filter: blur(6px);
      }

      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
      }
    }

    @keyframes secretFloat {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-6px);
      }
    }

    @keyframes revealIn {
      0% {
        opacity: 0;
        transform: translateY(4px);
        filter: blur(4px);
      }

      100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
      }
    }

    .clock-flip {
      position: relative;
      display: inline-block;
      perspective: 600px;
      cursor: default;
    }

    .clock-flip .flip-inner {
      position: relative;
      transition: transform 0.6s cubic-bezier(.6, .2, .2, 1);
      transform-style: preserve-3d;
    }

    .clock-flip:hover .flip-inner {
      transform: rotateX(180deg);
    }

    .clock-flip .flip-face {
      display: inline-flex;
      align-items: baseline;
      gap: 0.375rem;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
    }

    .clock-flip .flip-back {
      position: absolute;
      top: 0;
      right: 0;
      transform: rotateX(180deg);
      white-space: nowrap;
      justify-content: flex-end;
    }

    /* Learning Section */
    .learn-toggle[aria-pressed="true"] {
      box-shadow: 0 6px 18px -8px rgba(34, 197, 94, 0.45);
    }

    .learn-card {
      animation: fadeUp 320ms ease both;
    }

    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(6px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .learn-opt {
      transition: transform 160ms ease, background-color 200ms ease, border-color 200ms ease;
    }

    .learn-opt:hover {
      transform: translateX(2px);
    }

    .learn-scroll {
      scrollbar-width: thin;
      scrollbar-color: rgba(34, 197, 94, 0.45) transparent;
    }

    .learn-scroll::-webkit-scrollbar {
      width: 6px;
    }

    .learn-scroll::-webkit-scrollbar-thumb {
      background: rgba(34, 197, 94, 0.45);
      border-radius: 999px;
    }

    .learn-scroll::-webkit-scrollbar-track {
      background: transparent;
    }