:root {
        --bg-deep: #111216;
        --bg-deep-rgb: 17, 18, 22;
        --bg-mid: #1a1c22;
        --bg-mid-rgb: 26, 28, 34;
        --line-subtle: #3a3d48;
        --line-bright: #676d7f;
        --node-locked: #20232c;
        --node-available: #272b36;
        --node-available-rgb: 39, 43, 54;
        --node-complete: #1d2e24;

        --day1: #4ade80;
        --day2: #60a5fa;
        --day3: #c084fc;
        --day4: #fbbf24;
        --day5: #f87171;

        --active-accent: var(--line-bright);
        --lesson-accent: var(--day1);
        --lesson-accent-rgb: 74, 222, 128;

        --text-primary: #f3f4f7;
        --text-secondary: #d0d4de;
        --text-muted: #a2a8b8;
      }

      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      body {
        font-family: "Cormorant Garamond", Georgia, serif;
        background: var(--bg-deep);
        color: var(--text-primary);
        min-height: 100vh;
        font-size: 18px;
        line-height: 1.7;
        padding: 2rem;
      }

      /* Escher-inspired tessellation background */
      .escher-bg {
        position: fixed;
        inset: 0;
        z-index: 0;
        opacity: 0.06;
        pointer-events: none;
      }

      .escher-bg svg {
        width: 100%;
        height: 100%;
      }

      /* Impossible staircase decoration */
      .impossible-stairs {
        position: fixed;
        width: 200px;
        height: 200px;
        opacity: 0.08;
        z-index: 0;
      }

      .stairs-left {
        left: 2%;
        top: 20%;
        transform: rotate(-15deg);
      }

      .stairs-right {
        right: 2%;
        bottom: 15%;
        transform: rotate(15deg) scaleX(-1);
      }

      /* Tessellation animation */
      @keyframes tessellate-drift {
        0%,
        100% {
          transform: translate(0, 0) rotate(0deg);
        }
        50% {
          transform: translate(10px, 10px) rotate(1deg);
        }
      }

      .escher-bg {
        animation: tessellate-drift 60s ease-in-out infinite;
      }

      /* Main content wrapper */
      .content-wrapper {
        position: relative;
        z-index: 1;
      }

      .header {
        text-align: center;
        margin-bottom: 3rem;
        padding-bottom: 2rem;
        border-bottom: 1px solid var(--line-subtle);
        position: relative;
      }

      .header::before,
      .header::after {
        content: "";
        position: absolute;
        top: 50%;
        width: 200px;
        height: 1px;
        background: var(--line-subtle);
      }

      .header::before {
        left: 0;
      }
      .header::after {
        right: 0;
      }

      h1 {
        font-size: 3.2rem;
        font-weight: 400;
        letter-spacing: 0.08em;
        margin-bottom: 0.5rem;
        color: var(--text-primary);
      }

      .subtitle {
        font-family: "JetBrains Mono", monospace;
        font-size: 0.9rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--text-secondary);
      }

      .subtitle-spaced {
        margin-top: 0.5rem;
      }

      .calendar-scroll {
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        margin-bottom: 3rem;
        padding-bottom: 0.75rem;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-gutter: stable;
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
      }

      .calendar-scroll::-webkit-scrollbar {
        height: 10px;
      }

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

      .calendar-scroll::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.18);
        border-radius: 999px;
      }

      .calendar-scroll::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.28);
      }

      .calendar {
        display: grid;
        grid-template-columns: 80px repeat(5, minmax(280px, 1fr));
        gap: 3px;
        width: max(100%, 1480px);
        background: rgba(42, 42, 48, 0.55);
        border-radius: 0;
        overflow: hidden;
        margin-bottom: 0;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
        clip-path: polygon(
          12px 0,
          calc(100% - 12px) 0,
          100% 12px,
          100% calc(100% - 12px),
          calc(100% - 12px) 100%,
          12px 100%,
          0 calc(100% - 12px),
          0 12px
        );
      }

      .time-slot {
        background: rgba(var(--bg-deep-rgb), 0.82);
        padding: 1rem 0.75rem;
        text-align: right;
        font-family: "JetBrains Mono", monospace;
        font-size: 0.82rem;
        color: var(--text-secondary);
        font-variant-numeric: tabular-nums;
      }

      .day-header {
        background: rgba(var(--bg-mid-rgb), 0.78);
        padding: 1rem;
        text-align: center;
        font-weight: 600;
        border-bottom: 2px solid rgba(42, 42, 48, 0.72);
        font-size: 1.1rem;
      }

      .day-header .date {
        font-family: "JetBrains Mono", monospace;
        font-size: 0.75rem;
        color: var(--text-secondary);
        font-weight: 500;
        margin-top: 0.35rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .day-header .theme {
        font-family: "JetBrains Mono", monospace;
        font-size: 0.78rem;
        color: var(--text-secondary);
        font-weight: 500;
        margin-top: 0.55rem;
        font-style: normal;
        line-height: 1.5;
      }

      .session {
        padding: 0.95rem;
        margin: 4px;
        font-size: 0.95rem;
        background: rgba(var(--node-available-rgb), 0.9);
        transition: all 0.3s ease;
        position: relative;
        clip-path: polygon(
          6px 0,
          calc(100% - 6px) 0,
          100% 6px,
          100% calc(100% - 6px),
          calc(100% - 6px) 100%,
          6px 100%,
          0 calc(100% - 6px),
          0 6px
        );
      }

      .session:hover {
        transform: translate(-2px, -2px);
      }

      .session .lesson-num {
        font-family: "JetBrains Mono", monospace;
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        margin-bottom: 0.35rem;
        padding-bottom: 0.4rem;
        border-bottom: 2px solid var(--accent-color, var(--line-subtle));
        display: inline-block;
        color: var(--text-secondary);
      }

      .session .title {
        font-weight: 600;
        margin-bottom: 0.35rem;
        line-height: 1.35;
        font-size: 1.08rem;
        text-wrap: balance;
        overflow-wrap: anywhere;
      }

      .session .duration {
        font-family: "JetBrains Mono", monospace;
        font-size: 0.78rem;
        color: var(--text-secondary);
        opacity: 1;
        line-height: 1.45;
        min-height: 1.45em;
        padding-right: 0;
        overflow-wrap: anywhere;
        text-wrap: pretty;
      }

      .session {
        cursor: pointer;
        isolation: isolate;
      }

      .session::after {
        content: "View lesson ↗";
        position: absolute;
        right: 0.8rem;
        bottom: 0.8rem;
        font-family: "JetBrains Mono", monospace;
        font-size: 0.62rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--accent-color, var(--text-secondary));
        opacity: 0;
        transform: translateY(4px);
        transition:
          opacity 0.25s ease,
          transform 0.25s ease;
        pointer-events: none;
      }

      .session:hover::after,
      .session:focus-visible::after,
      .session.active::after {
        opacity: 0.95;
        transform: translateY(0);
      }

      .session:focus-visible {
        outline: 2px solid var(--accent-color, var(--line-bright));
        outline-offset: 3px;
        transform: translate(-2px, -2px);
      }

      .session.active {
        box-shadow:
          0 0 0 1px var(--accent-color, var(--line-bright)),
          0 16px 32px rgba(0, 0, 0, 0.3);
        background: rgba(var(--node-available-rgb), 0.98);
      }

      /* Phase colors - using CSS custom property for the accent bar */
      .phase-1 {
        --accent-color: var(--day1);
      }
      .phase-2 {
        --accent-color: var(--day2);
      }
      .phase-3 {
        --accent-color: var(--day3);
      }
      .phase-4 {
        --accent-color: var(--day4);
      }
      .phase-5 {
        --accent-color: var(--day5);
      }

      .corner {
        background: rgba(var(--bg-deep-rgb), 0.74);
      }

      /* Lesson Details */
      .lessons-detail {
        max-width: 1200px;
        margin: 0 auto;
      }

      .is-hidden {
        display: none;
      }

      .phase-section {
        margin-bottom: 3rem;
      }

      .phase-title {
        font-size: 1.5rem;
        font-weight: 400;
        margin-bottom: 1.5rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid var(--line-subtle);
        display: flex;
        align-items: center;
        gap: 1rem;
        letter-spacing: 0.02em;
      }

      .phase-badge {
        font-family: "JetBrains Mono", monospace;
        font-size: 0.65rem;
        padding: 0.25rem 0.75rem;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.15em;
        clip-path: polygon(
          4px 0,
          calc(100% - 4px) 0,
          100% 4px,
          100% calc(100% - 4px),
          calc(100% - 4px) 100%,
          4px 100%,
          0 calc(100% - 4px),
          0 4px
        );
      }

      .phase-badge.p1 {
        background: var(--day1);
        color: #0d0d0f;
      }
      .phase-badge.p2 {
        background: var(--day2);
        color: #0d0d0f;
      }
      .phase-badge.p3 {
        background: var(--day3);
        color: #0d0d0f;
      }
      .phase-badge.p4 {
        background: var(--day4);
        color: #0d0d0f;
      }
      .phase-badge.p5 {
        background: var(--day5);
        color: #0d0d0f;
      }

      .lesson-card {
        background: var(--bg-mid);
        padding: 1.5rem;
        margin-bottom: 1rem;
        border: 1px solid var(--line-subtle);
        position: relative;
        clip-path: polygon(
          12px 0,
          calc(100% - 12px) 0,
          100% 12px,
          100% calc(100% - 12px),
          calc(100% - 12px) 100%,
          12px 100%,
          0 calc(100% - 12px),
          0 12px
        );
      }

      .lesson-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 1rem;
      }

      .lesson-title {
        font-size: 1.2rem;
        font-weight: 600;
        letter-spacing: 0.02em;
      }

      .lesson-meta {
        font-family: "JetBrains Mono", monospace;
        font-size: 0.8rem;
        color: var(--text-secondary);
        text-align: right;
        letter-spacing: 0.04em;
        line-height: 1.5;
      }

      .lesson-content {
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: 2rem;
      }

      .lecture-section,
      .exercise-section {
        padding: 1rem;
        background: var(--bg-deep);
        clip-path: polygon(
          8px 0,
          calc(100% - 8px) 0,
          100% 8px,
          100% calc(100% - 8px),
          calc(100% - 8px) 100%,
          8px 100%,
          0 calc(100% - 8px),
          0 8px
        );
      }

      .section-label {
        font-family: "JetBrains Mono", monospace;
        font-size: 0.74rem;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: var(--lesson-accent);
        margin-bottom: 0.85rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
      }

      .section-label .time {
        background: rgba(var(--lesson-accent-rgb), 0.09);
        border: 1px solid rgba(var(--lesson-accent-rgb), 0.2);
        color: var(--text-primary);
        padding: 0.15rem 0.5rem;
        clip-path: polygon(
          3px 0,
          calc(100% - 3px) 0,
          100% 3px,
          100% calc(100% - 3px),
          calc(100% - 3px) 100%,
          3px 100%,
          0 calc(100% - 3px),
          0 3px
        );
        font-variant-numeric: tabular-nums;
      }

      ul {
        list-style: none;
        padding-left: 0;
      }

      li {
        padding: 0.42rem 0;
        padding-left: 1.35rem;
        position: relative;
        font-size: 1rem;
        color: var(--text-secondary);
      }

      li::before {
        content: "↳";
        position: absolute;
        left: 0;
        color: var(--text-muted);
        font-family: "JetBrains Mono", monospace;
      }

      .prompt-box {
        background: rgba(var(--bg-mid-rgb), 0.82);
        border: 1px solid rgba(var(--lesson-accent-rgb), 0.16);
        box-shadow: inset 2px 0 0 rgba(var(--lesson-accent-rgb), 0.54);
        padding: 1rem;
        margin-top: 0.75rem;
        font-family: "JetBrains Mono", monospace;
        font-size: 0.9rem;
        color: var(--text-secondary);
        line-height: 1.65;
        clip-path: polygon(
          8px 0,
          calc(100% - 8px) 0,
          100% 8px,
          100% calc(100% - 8px),
          calc(100% - 8px) 100%,
          8px 100%,
          0 calc(100% - 8px),
          0 8px
        );
      }

      .prompt-label {
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.09em;
        color: var(--lesson-accent);
        margin-bottom: 0.6rem;
      }

      .outcome {
        margin-top: 1rem;
        padding: 0.9rem;
        border-left: 2px solid rgba(var(--lesson-accent-rgb), 0.78);
        background: rgba(var(--lesson-accent-rgb), 0.06);
        font-size: 0.95rem;
        color: var(--text-secondary);
        line-height: 1.6;
      }

      .outcome strong {
        color: var(--lesson-accent);
      }

      .overview-shell {
        max-height: 6000px;
        overflow: clip;
        transform-origin: top center;
        transition:
          opacity 0.38s ease,
          transform 0.48s cubic-bezier(0.22, 1, 0.36, 1),
          max-height 0.58s ease,
          margin-bottom 0.38s ease;
      }

      body.desktop-lesson-open {
        overflow: hidden;
      }

      body.desktop-lesson-open .overview-shell {
        opacity: 0;
        transform: translateY(-32px) scale(0.985);
        max-height: 0;
        pointer-events: none;
        margin-bottom: 0;
      }

      .desktop-lesson-page {
        --active-accent: var(--line-bright);
        position: fixed;
        inset: 1rem;
        z-index: 30;
        display: flex;
        justify-content: center;
        align-items: stretch;
        opacity: 0;
        pointer-events: none;
        transform: translateY(24px) scale(0.985);
        transform-origin: center center;
        transition:
          opacity 0.3s ease,
          transform 0.48s cubic-bezier(0.22, 1, 0.36, 1);
      }

      body.desktop-lesson-open .desktop-lesson-page {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0) scale(1);
      }

      .lesson-page-shell {
        width: min(1500px, 100%);
        height: 100%;
        min-height: 0;
        padding: 1rem;
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        border: 1px solid rgba(var(--lesson-accent-rgb), 0.16);
        background: linear-gradient(
          180deg,
          rgba(var(--bg-mid-rgb), 0.68) 0%,
          rgba(var(--bg-deep-rgb), 0.94) 100%
        );
        box-shadow:
          0 28px 60px rgba(0, 0, 0, 0.28),
          inset 0 1px 0 rgba(var(--lesson-accent-rgb), 0.08);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        clip-path: polygon(
          18px 0,
          calc(100% - 18px) 0,
          100% 18px,
          100% calc(100% - 18px),
          calc(100% - 18px) 100%,
          18px 100%,
          0 calc(100% - 18px),
          0 18px
        );
      }

      .lesson-page-topbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        margin-bottom: 0.85rem;
      }

      .lesson-page-back {
        border: 1px solid var(--line-subtle);
        background: rgba(var(--bg-deep-rgb), 0.72);
        color: var(--text-primary);
        font-family: "JetBrains Mono", monospace;
        font-size: 0.74rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        padding: 0.75rem 1rem;
        cursor: pointer;
        clip-path: polygon(
          6px 0,
          calc(100% - 6px) 0,
          100% 6px,
          100% calc(100% - 6px),
          calc(100% - 6px) 100%,
          6px 100%,
          0 calc(100% - 6px),
          0 6px
        );
      }

      .lesson-page-back:hover,
      .lesson-page-back:focus-visible {
        border-color: var(--active-accent);
        outline: none;
      }

      .lesson-page-kicker {
        flex: 1;
        min-width: 0;
        text-align: right;
        font-family: "JetBrains Mono", monospace;
        font-size: 0.72rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--active-accent);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .lesson-page-hero,
      .lesson-page-summary {
        display: none;
      }

      .lesson-page-eyebrow {
        font-family: "JetBrains Mono", monospace;
        font-size: 0.78rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--text-secondary);
        margin-bottom: 0.75rem;
      }

      .lesson-page-title {
        font-size: clamp(2.5rem, 5vw, 4.4rem);
        line-height: 1.02;
        margin-bottom: 0.5rem;
        letter-spacing: 0.01em;
      }

      .lesson-page-subtitle {
        font-family: "JetBrains Mono", monospace;
        font-size: 0.92rem;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--text-secondary);
        line-height: 1.7;
        max-width: 58rem;
      }

      .lesson-page-content {
        min-height: 0;
        overflow: auto;
        padding-right: 0.25rem;
      }

      .lesson-page-content .lesson-card {
        min-height: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        margin-bottom: 0;
        padding: 1.5rem;
        overflow: hidden;
        border-color: rgba(var(--lesson-accent-rgb), 0.16);
        background: linear-gradient(
          180deg,
          rgba(var(--bg-mid-rgb), 0.9) 0%,
          rgba(var(--bg-deep-rgb), 0.95) 100%
        );
        box-shadow: inset 0 1px 0 rgba(var(--lesson-accent-rgb), 0.06);
      }

      .lesson-page-content .lesson-header {
        flex: 0 0 auto;
        margin-bottom: 1.1rem;
        gap: 0.9rem;
      }

      .lesson-page-content .lesson-title {
        font-size: 1.85rem;
        line-height: 1.12;
      }

      .lesson-page-content .lesson-meta {
        min-width: 180px;
        font-size: 0.92rem;
        line-height: 1.55;
      }

      .lesson-page-content .lesson-content {
        flex: 1 1 auto;
        min-height: 0;
        gap: 1.2rem;
      }

      .lesson-page-content .lecture-section,
      .lesson-page-content .exercise-section {
        padding: 1rem;
        border: 1px solid rgba(var(--lesson-accent-rgb), 0.1);
        background: rgba(var(--bg-deep-rgb), 0.94);
      }

      .lesson-page-content li::before {
        color: rgba(var(--lesson-accent-rgb), 0.82);
      }

      .lesson-page-content .section-label {
        margin-bottom: 0.8rem;
        font-size: 0.76rem;
      }

      .lesson-page-content li {
        padding: 0.36rem 0;
        padding-left: 1.35rem;
        font-size: 1.08rem;
        line-height: 1.6;
      }

      .lesson-page-content .prompt-box {
        padding: 1rem;
        margin-top: 0.75rem;
        font-size: 0.98rem;
        line-height: 1.65;
      }

      .lesson-page-content .outcome {
        margin-top: 0.8rem;
        padding: 0.95rem 1rem;
        font-size: 1rem;
        line-height: 1.6;
      }

      .lesson-drawer-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(9, 10, 14, 0.72);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
        z-index: 20;
      }

      .lesson-drawer {
        --drawer-offset: 0px;
        position: fixed;
        left: 50%;
        bottom: 0;
        width: min(980px, calc(100vw - 2rem));
        max-height: min(84vh, 920px);
        transform: translate(-50%, calc(100% + 2rem + var(--drawer-offset)));
        transition:
          transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
          opacity 0.25s ease;
        opacity: 0;
        pointer-events: none;
        z-index: 21;
        border: 1px solid rgba(var(--lesson-accent-rgb), 0.18);
        border-bottom: none;
        background: linear-gradient(
          180deg,
          rgba(var(--bg-mid-rgb), 0.98) 0%,
          rgba(var(--bg-deep-rgb), 0.98) 100%
        );
        box-shadow:
          0 -24px 60px rgba(0, 0, 0, 0.45),
          inset 0 1px 0 rgba(var(--lesson-accent-rgb), 0.08);
        clip-path: polygon(
          18px 0,
          calc(100% - 18px) 0,
          100% 18px,
          100% 100%,
          0 100%,
          0 18px
        );
      }

      body.drawer-open {
        overflow: hidden;
      }

      body.drawer-open .lesson-drawer-backdrop {
        opacity: 1;
        pointer-events: auto;
      }

      body.drawer-open .lesson-drawer {
        transform: translate(-50%, var(--drawer-offset));
        opacity: 1;
        pointer-events: auto;
      }

      .lesson-drawer.dragging {
        transition: none;
      }

      .drawer-handle {
        width: 92px;
        height: 6px;
        border-radius: 999px;
        margin: 0.9rem auto 0;
        background: linear-gradient(
          90deg,
          rgba(var(--lesson-accent-rgb), 0.18),
          rgba(var(--lesson-accent-rgb), 0.58)
        );
        opacity: 0.9;
        touch-action: none;
        user-select: none;
      }

      .drawer-topbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        padding: 1rem 1.5rem 1rem;
        border-bottom: 1px solid rgba(var(--lesson-accent-rgb), 0.18);
        touch-action: none;
        user-select: none;
      }

      .drawer-kicker {
        font-family: "JetBrains Mono", monospace;
        font-size: 0.75rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--lesson-accent);
      }

      .drawer-close {
        border: 1px solid var(--line-subtle);
        background: rgba(var(--bg-deep-rgb), 0.7);
        color: var(--text-primary);
        font-family: "JetBrains Mono", monospace;
        font-size: 0.75rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        padding: 0.65rem 0.9rem;
        cursor: pointer;
        clip-path: polygon(
          6px 0,
          calc(100% - 6px) 0,
          100% 6px,
          100% calc(100% - 6px),
          calc(100% - 6px) 100%,
          6px 100%,
          0 calc(100% - 6px),
          0 6px
        );
      }

      .drawer-close:hover,
      .drawer-close:focus-visible {
        border-color: var(--lesson-accent);
        outline: none;
      }

      .drawer-scroll {
        overflow-y: auto;
        max-height: calc(min(84vh, 920px) - 72px);
        padding: 0 1.5rem 1.5rem;
      }

      .drawer-summary {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.75rem;
        margin: 1rem 0 1.25rem;
      }

      .drawer-summary-item {
        padding: 0.9rem 1rem;
        background: rgba(var(--bg-deep-rgb), 0.75);
        border: 1px solid rgba(var(--lesson-accent-rgb), 0.12);
        clip-path: polygon(
          8px 0,
          calc(100% - 8px) 0,
          100% 8px,
          100% calc(100% - 8px),
          calc(100% - 8px) 100%,
          8px 100%,
          0 calc(100% - 8px),
          0 8px
        );
      }

      .drawer-summary-label {
        display: block;
        font-family: "JetBrains Mono", monospace;
        font-size: 0.7rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: rgba(var(--lesson-accent-rgb), 0.72);
        margin-bottom: 0.35rem;
      }

      .drawer-summary-value {
        color: var(--text-primary);
        font-size: 1rem;
        line-height: 1.4;
      }

      .drawer-content .lesson-card {
        margin-bottom: 0;
        border-color: rgba(var(--lesson-accent-rgb), 0.16);
        background: linear-gradient(
          180deg,
          rgba(var(--bg-mid-rgb), 0.9) 0%,
          rgba(var(--bg-deep-rgb), 0.95) 100%
        );
        box-shadow: inset 0 1px 0 rgba(var(--lesson-accent-rgb), 0.06);
      }

      .drawer-content .lesson-title {
        font-size: 1.7rem;
        line-height: 1.12;
      }

      .drawer-content .lesson-meta {
        min-width: 150px;
        font-size: 0.88rem;
        line-height: 1.55;
      }

      .drawer-content .lecture-section,
      .drawer-content .exercise-section {
        border: 1px solid rgba(var(--lesson-accent-rgb), 0.1);
        background: rgba(var(--bg-deep-rgb), 0.94);
      }

      .drawer-content .section-label {
        font-size: 0.76rem;
      }

      .drawer-content li {
        font-size: 1.06rem;
        line-height: 1.6;
      }

      .drawer-content li::before {
        color: rgba(var(--lesson-accent-rgb), 0.82);
      }

      .drawer-content .prompt-box,
      .drawer-content .outcome {
        font-size: 0.98rem;
        line-height: 1.6;
      }

      @media (max-width: 1200px) {
        .lesson-content {
          grid-template-columns: 1fr;
        }

        .lesson-page-summary {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .header::before,
        .header::after {
          width: 60px;
        }

        h1 {
          font-size: 2rem;
        }
      }

      @media (max-width: 768px) {
        .impossible-stairs {
          display: none;
        }

        .desktop-lesson-page {
          display: none !important;
        }

        body.desktop-lesson-open .overview-shell {
          opacity: 1;
          transform: none;
          max-height: 6000px;
          pointer-events: auto;
        }

        body {
          padding: 1rem;
          padding-left: 0;
          padding-right: 0;
          font-size: 19px;
        }

        .header,
        .schedule-note-wrapper,
        .lessons-detail,
        .footer,
        .team-section {
          padding-left: 1rem;
          padding-right: 1rem;
        }

        h1 {
          font-size: 1.95rem;
          letter-spacing: 0.03em;
          line-height: 1.12;
        }

        .subtitle {
          font-size: 0.92rem;
          letter-spacing: 0.08em;
        }

        .header::before,
        .header::after {
          display: none;
        }

        .schedule-note-wrapper {
          text-align: left;
        }

        .schedule-note {
          flex-direction: column;
          gap: 0.6rem;
          text-align: left;
          padding: 1rem;
          align-items: flex-start;
          font-size: 0.96rem;
        }

        .schedule-note .schedule-item {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 0.25rem;
        }

        .schedule-note code {
          word-break: break-word;
          vertical-align: middle;
        }

        .calendar-scroll {
          overflow: visible;
          margin-bottom: 3rem;
        }

        /* Mobile calendar: stacked card layout */
        .calendar {
          display: flex;
          flex-direction: column;
          gap: 0;
          min-width: 0;
          background: transparent;
          clip-path: none;
        }

        /* Hide corner cell and time slots on mobile */
        .calendar > .corner,
        .calendar > .time-slot {
          display: none;
        }

        /* Day headers become section dividers */
        .calendar > .day-header {
          background: var(--bg-mid);
          padding: 1.1rem 1.25rem;
          margin: 0;
          border-radius: 0;
          clip-path: none;
          text-align: left;
          border-bottom: 1px solid var(--line-subtle);
          width: 100%;
          display: block;
          font-size: 1.2rem;
          line-height: 1.25;
        }

        .calendar > .day-header:not(:first-of-type) {
          margin-top: 0.6rem;
        }

        .calendar > .day-header:first-of-type {
          margin: 0;
        }

        .calendar > .day-header .date,
        .calendar > .day-header .theme {
          display: block;
          margin: 0;
          width: 100%;
        }

        .calendar > .day-header .date {
          margin-top: 0.45rem;
          font-size: 0.82rem;
        }

        .calendar > .day-header .theme {
          margin-top: 0.2rem;
          font-size: 0.88rem;
        }

        .calendar > .day-header .date::after {
          content: none;
        }

        /* Sessions stack vertically */
        .calendar > .session {
          margin: 0;
          padding: 1rem 1.25rem 1.1rem;
          clip-path: none;
          border-radius: 0;
          border-top: 1px solid var(--line-subtle);
        }

        /* Reorder grid items to group by day */
        /* Day headers: 2nd, 3rd, 4th, 5th, 6th children */
        .calendar > :nth-child(2) {
          order: 1;
        } /* Day 1 header */
        .calendar > :nth-child(8) {
          order: 2;
        } /* Day 1 session 1 */
        .calendar > :nth-child(14) {
          order: 3;
        } /* Day 1 session 2 */
        .calendar > :nth-child(20) {
          order: 4;
        } /* Day 1 session 3 */

        .calendar > :nth-child(3) {
          order: 5;
        } /* Day 2 header */
        .calendar > :nth-child(9) {
          order: 6;
        } /* Day 2 session 1 */
        .calendar > :nth-child(15) {
          order: 7;
        } /* Day 2 session 2 */
        .calendar > :nth-child(21) {
          order: 8;
        } /* Day 2 session 3 */

        .calendar > :nth-child(4) {
          order: 9;
        } /* Day 3 header */
        .calendar > :nth-child(10) {
          order: 10;
        } /* Day 3 session 1 */
        .calendar > :nth-child(16) {
          order: 11;
        } /* Day 3 session 2 */
        .calendar > :nth-child(22) {
          order: 12;
        } /* Day 3 session 3 */

        .calendar > :nth-child(5) {
          order: 13;
        } /* Day 4 header */
        .calendar > :nth-child(11) {
          order: 14;
        } /* Day 4 session 1 */
        .calendar > :nth-child(17) {
          order: 15;
        } /* Day 4 session 2 */
        .calendar > :nth-child(23) {
          order: 16;
        } /* Day 4 session 3 */

        .calendar > :nth-child(6) {
          order: 17;
        } /* Day 5 header */
        .calendar > :nth-child(12) {
          order: 18;
        } /* Day 5 session 1 */
        .calendar > :nth-child(18) {
          order: 19;
        } /* Day 5 session 2 */
        .calendar > :nth-child(24) {
          order: 20;
        } /* Day 5 session 3 */

        .session .lesson-num {
          font-size: 0.75rem;
          margin-bottom: 0.3rem;
        }

        .session .title {
          font-size: 1.04rem;
          line-height: 1.28;
        }

        .session .duration {
          font-size: 0.76rem;
          line-height: 1.5;
          margin-top: 0.35rem;
          min-height: 0;
          padding-right: 0;
          max-width: 100%;
        }

        /* Disable hover effect on mobile */
        .session:hover {
          transform: none;
        }

        .session::after {
          opacity: 0.95;
          transform: translateY(0);
          position: static;
          display: block;
          margin-top: 0.65rem;
          font-size: 0.64rem;
        }

        .lesson-drawer {
          width: 100vw;
          max-height: 88vh;
          clip-path: none;
          border-left: none;
          border-right: none;
          transform: translate(-50%, 100%);
        }

        .drawer-topbar,
        .drawer-scroll {
          padding-left: 1rem;
          padding-right: 1rem;
        }

        .drawer-summary {
          grid-template-columns: 1fr;
        }

        .drawer-content .lesson-title {
          font-size: 1.42rem;
        }

        /* Lesson cards */
        .lesson-card {
          padding: 1rem;
        }

        .lesson-header {
          flex-direction: column;
          gap: 0.5rem;
        }

        .lesson-meta {
          text-align: left;
          font-size: 0.84rem;
        }

        .lesson-title {
          font-size: 1.16rem;
        }

        .phase-title {
          flex-direction: column;
          align-items: flex-start;
          gap: 0.5rem;
          font-size: 1.28rem;
        }

        li,
        .prompt-box,
        .team-bio {
          font-size: 1rem;
        }

        /* Footer */
        .footer-stats {
          gap: 2rem;
        }

        .stat-value {
          font-size: 2rem;
        }
      }

      .schedule-note {
        text-align: left;
        color: var(--text-secondary);
        font-family: "JetBrains Mono", monospace;
        font-size: 0.92rem;
        margin-bottom: 2rem;
        padding: 1.1rem 1.5rem;
        background: var(--bg-mid);
        border: 1px solid var(--line-subtle);
        display: inline-flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.8rem;
        line-height: 1.55;
        clip-path: polygon(
          8px 0,
          calc(100% - 8px) 0,
          100% 8px,
          100% calc(100% - 8px),
          calc(100% - 8px) 100%,
          8px 100%,
          0 calc(100% - 8px),
          0 8px
        );
      }

      .schedule-note-wrapper {
        text-align: center;
        margin-bottom: 2rem;
      }

      .schedule-note .schedule-item {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        align-self: stretch;
      }

      .schedule-note code {
        background: var(--node-available);
        padding: 0.2rem 0.5rem;
        color: var(--day1);
        vertical-align: middle;
        clip-path: polygon(
          3px 0,
          calc(100% - 3px) 0,
          100% 3px,
          100% calc(100% - 3px),
          calc(100% - 3px) 100%,
          3px 100%,
          0 calc(100% - 3px),
          0 3px
        );
      }

      /* Footer */
      .footer {
        text-align: center;
        padding: 3rem 0;
        margin-top: 2rem;
        border-top: 1px solid var(--line-subtle);
      }

      .footer-stats {
        display: flex;
        justify-content: center;
        gap: 5rem;
        margin-bottom: 1.5rem;
      }

      .stat {
        text-align: center;
      }

      .stat-value {
        font-size: 2.5rem;
        font-weight: 600;
        color: var(--text-primary);
      }

      .stat-label {
        font-family: "JetBrains Mono", monospace;
        font-size: 0.82rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--text-secondary);
      }

      .footer-note {
        font-family: "JetBrains Mono", monospace;
        font-size: 0.92rem;
        color: var(--text-secondary);
      }

      /* Team Section */
      .team-section {
        max-width: 900px;
        margin: 0 auto;
      }

      .team-title {
        font-size: 1.8rem;
        font-weight: 400;
        letter-spacing: 0.04em;
        margin-bottom: 2rem;
        color: var(--text-primary);
      }

      .team-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
      }

      .team-card {
        display: flex;
        gap: 1.5rem;
        padding: 1.5rem;
        background: var(--bg-mid);
        border: 1px solid var(--line-subtle);
        text-align: left;
        clip-path: polygon(
          12px 0,
          calc(100% - 12px) 0,
          100% 12px,
          100% calc(100% - 12px),
          calc(100% - 12px) 100%,
          12px 100%,
          0 calc(100% - 12px),
          0 12px
        );
      }

      .team-avatar-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 0.5rem;
        flex-shrink: 0;
      }

      .team-avatar {
        width: 80px;
        height: 80px;
        flex-shrink: 0;
        object-fit: cover;
        background: var(--node-available);
        border: 1px solid var(--line-bright);
        clip-path: polygon(
          8px 0,
          calc(100% - 8px) 0,
          100% 8px,
          100% calc(100% - 8px),
          calc(100% - 8px) 100%,
          8px 100%,
          0 calc(100% - 8px),
          0 8px
        );
      }

      .team-info {
        flex: 1;
      }

      .team-name {
        font-size: 1.2rem;
        font-weight: 600;
        margin-bottom: 0.25rem;
        color: var(--text-primary);
      }

      .email-icon {
        display: inline-block;
        color: var(--text-secondary);
        opacity: 0.4;
        transition: opacity 0.2s;
      }

      .email-icon:hover {
        opacity: 0.7;
      }

      .team-role {
        font-family: "JetBrains Mono", monospace;
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: var(--day2);
        margin-bottom: 0.85rem;
      }

      .team-bio {
        font-size: 1rem;
        line-height: 1.7;
        color: var(--text-secondary);
      }

      .team-bio em {
        color: var(--text-primary);
        font-style: italic;
      }

      @media (max-width: 768px) {
        .team-grid {
          grid-template-columns: 1fr;
          gap: 1.5rem;
        }

        .team-card {
          flex-direction: column;
          align-items: center;
          text-align: center;
        }

        .team-avatar-wrapper {
          align-items: center;
        }

        .team-title {
          font-size: 1.4rem;
        }
      }