/* ═══════════════════════════════════════════════════════════════
       DESIGN SYSTEM — CSS CUSTOM PROPERTIES
    ═══════════════════════════════════════════════════════════════ */
    :root {
      /* Typography */
      --font-display: 'Instrument Serif', Georgia, serif;
      --font-body: 'Space Grotesk', system-ui, sans-serif;
      --font-mono: 'JetBrains Mono', monospace;
      
      /* Sizing */
      --header-offset: 88px;
      --panel-height: calc(100vh - var(--header-offset));
      --panel-height-mobile: calc(100svh - var(--header-offset) - var(--mobile-bottom-bar-height));
      --radius-sm: 8px;
      --radius-md: 16px;
      --radius-lg: 24px;
      --radius-xl: 32px;
      
      /* Transitions */
      --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
      --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
      --duration-fast: 150ms;
      --duration-normal: 300ms;
      --duration-slow: 500ms;
    }

    @media (max-width: 768px) {
      :root {
        --header-offset: 76px;
        --panel-height: calc(100svh - var(--header-offset) - var(--mobile-bottom-bar-height));
      }
    }

    @supports (height: 100dvh) {
      @media (max-width: 768px) {
        :root {
          --panel-height: calc(100dvh - var(--header-offset) - var(--mobile-bottom-bar-height));
          --panel-height-mobile: calc(100dvh - var(--header-offset) - var(--mobile-bottom-bar-height));
        }
      }
    }

    /* ═══ LIGHT THEME (Studio Daylight) ═══ */
    [data-theme="light"] {
      --bg-primary: #fff9f6;
      --bg-secondary: #fefdfc;
      --bg-tertiary: #fff5f0;
      --bg-card: #ffffff;
      --bg-card-hover: #fffaf8;
      
      --text-primary: #1a1a1f;
      --text-secondary: #4a4a55;
      --text-muted: #8a8a95;
      --text-accent: #ff5577;
      
      --accent-primary: #ff5577;
      --accent-secondary: #f5c242;
      --accent-tertiary: #aaf2d2;
      --accent-gradient: linear-gradient(135deg, #ff5577 0%, #f5c242 50%, #aaf2d2 100%);
      
      --border-color: rgba(26, 26, 31, 0.08);
      --border-accent: rgba(255, 85, 119, 0.3);
      
      --shadow-sm: 0 2px 8px rgba(26, 26, 31, 0.06);
      --shadow-md: 0 8px 24px rgba(26, 26, 31, 0.08);
      --shadow-lg: 0 16px 48px rgba(26, 26, 31, 0.12);
      --shadow-glow: 0 0 40px rgba(255, 85, 119, 0.15);
      --shadow-card: 0 4px 20px rgba(26, 26, 31, 0.08), 0 0 0 1px rgba(26, 26, 31, 0.04);
      
      --glass-bg: rgba(255, 255, 255, 0.8);
      --glass-border: rgba(255, 255, 255, 0.5);
      
      --canvas-bg: #fefcfb;
      --canvas-grid: rgba(26, 26, 31, 0.05);
      
      --interactive-glow: rgba(255, 85, 119, 0.2);
      --cursor-glow: transparent;
    }

    /* ═══ DARK THEME (Studio Night) ═══ */
    [data-theme="dark"] {
      --bg-primary: #0c0c11;
      --bg-secondary: #141418;
      --bg-tertiary: #1a1a22;
      --bg-card: rgba(25, 25, 35, 0.6);
      --bg-card-hover: rgba(35, 35, 50, 0.7);
      
      --text-primary: #f5f5f7;
      --text-secondary: #a0a0b0;
      --text-muted: #606070;
      --text-accent: #00eebb;
      
      --accent-primary: #9d00ff;
      --accent-secondary: #00eebb;
      --accent-tertiary: #ff005a;
      --accent-gradient: linear-gradient(135deg, #9d00ff 0%, #00eebb 50%, #ff005a 100%);
      
      --border-color: rgba(255, 255, 255, 0.08);
      --border-accent: rgba(0, 238, 187, 0.4);
      
      --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
      --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
      --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);
      --shadow-glow: 0 0 60px rgba(157, 0, 255, 0.3);
      --shadow-card: 0 4px 30px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
      
      --glass-bg: rgba(20, 20, 30, 0.7);
      --glass-border: rgba(255, 255, 255, 0.1);
      
      --canvas-bg: #101015;
      --canvas-grid: rgba(255, 255, 255, 0.03);
      
      --interactive-glow: rgba(0, 238, 187, 0.3);
      --cursor-glow: radial-gradient(circle 100px, rgba(157, 0, 255, 0.15), transparent);
    }

    /* ═══════════════════════════════════════════════════════════════
       RESET & BASE STYLES
    ═══════════════════════════════════════════════════════════════ */
    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    body.creative-work-page {
      font-family: var(--font-body);
      background: var(--bg-primary);
      color: var(--text-primary);
      line-height: 1.6;
      overflow-x: hidden;
      transition: background var(--duration-slow) var(--ease-smooth),
                  color var(--duration-slow) var(--ease-smooth);
    }

    .creative-work-shell {
      min-height: 100vh;
      padding-top: var(--header-offset);
      padding-bottom: var(--mobile-bottom-bar-height);
      background: var(--bg-primary);
    }

    @media (max-width: 768px) {
      .creative-work-shell {
        padding-top: calc(var(--header-offset) * 0.75);
      }
    }

    /* Cursor glow effect for dark mode */
    [data-theme="dark"] body.creative-work-page::before {
      content: '';
      position: fixed;
      width: 300px;
      height: 300px;
      background: var(--cursor-glow);
      border-radius: 50%;
      pointer-events: none;
      z-index: 9999;
      transform: translate(-50%, -50%);
      opacity: 0;
      transition: opacity var(--duration-fast);
    }

    /* ═══════════════════════════════════════════════════════════════
       TYPOGRAPHY
    ═══════════════════════════════════════════════════════════════ */
    h1, h2, h3 {
      font-family: var(--font-display);
      font-weight: 400;
      line-height: 1.1;
    }

    h1 {
      font-size: clamp(2.5rem, 8vw, 5rem);
      letter-spacing: -0.02em;
    }

    h2 {
      font-size: clamp(1.8rem, 5vw, 3rem);
      letter-spacing: -0.01em;
    }

    h3 {
      font-size: clamp(1.2rem, 3vw, 1.8rem);
    }

    .display-text {
      font-family: var(--font-display);
      font-style: italic;
      background: var(--accent-gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .mono {
      font-family: var(--font-mono);
      font-size: 0.9em;
    }

    .label {
      font-size: 0.75rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--text-muted);
    }

    /* ═══════════════════════════════════════════════════════════════
       SCROLL CONTAINER & PANELS
    ═══════════════════════════════════════════════════════════════ */
    .masterclass-container {
      width: 100%;
      height: var(--panel-height-mobile);
      height: var(--panel-height);
      max-height: var(--panel-height);
      overflow-y: scroll;
      scroll-snap-type: y mandatory;
      scroll-behavior: smooth;
      scroll-padding-top: 0;
      scroll-padding-bottom: var(--mobile-bottom-bar-height);
    }

    .chapter {
      scroll-snap-align: start;
    }

    .panel {
      width: 100%;
      min-height: var(--panel-height-mobile);
      min-height: var(--panel-height);
      height: var(--panel-height);
      max-height: var(--panel-height);
      padding: clamp(1.5rem, 5vw, 4rem);
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
      scroll-snap-align: start;
      overflow: hidden;
    }

    .panel::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at var(--mouse-x, 50%) var(--mouse-y, 50%), 
        var(--interactive-glow), transparent 50%);
      opacity: 0;
      transition: opacity var(--duration-normal);
      pointer-events: none;
    }

    .panel:hover::before {
      opacity: 1;
    }

    .panel-a {
      background: var(--bg-primary);
    }

    .panel-b {
      background: var(--bg-secondary);
    }

    /* Desktop: Horizontal Split */
    @media (min-width: 1024px) {
      .masterclass-container {
        scroll-snap-type: y mandatory;
      }

      .chapter {
        display: flex;
        flex-direction: row;
        min-height: var(--panel-height);
        height: var(--panel-height);
        max-height: var(--panel-height);
        scroll-snap-align: start;
      }

      .panel {
        width: 50%;
        min-height: var(--panel-height);
        height: var(--panel-height);
        max-height: var(--panel-height);
        scroll-snap-align: none;
      }
    }

    /* ═══════════════════════════════════════════════════════════════
       PROGRESS INDICATOR
    ═══════════════════════════════════════════════════════════════ */
    .progress-bar {
      position: fixed;
      left: 1.5rem;
      top: 50%;
      transform: translateY(-50%);
      z-index: 1000;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .progress-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--border-color);
      cursor: pointer;
      transition: all var(--duration-normal) var(--ease-bounce);
    }

    .progress-dot.active {
      background: var(--accent-primary);
      box-shadow: 0 0 12px var(--accent-primary);
      transform: scale(1.5);
    }

    .progress-dot:hover:not(.active) {
      background: var(--text-muted);
      transform: scale(1.2);
    }

    @media (max-width: 768px) {
      .progress-bar {
        left: 0.75rem;
      }
      .progress-dot {
        width: 6px;
        height: 6px;
      }
    }

    /* ═══════════════════════════════════════════════════════════════
       CARDS & CONTAINERS
    ═══════════════════════════════════════════════════════════════ */
    .card {
      background: var(--bg-card);
      border-radius: var(--radius-lg);
      padding: clamp(1.5rem, 4vw, 2.5rem);
      box-shadow: var(--shadow-card);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid var(--border-color);
      transition: all var(--duration-normal) var(--ease-smooth);
    }

    .card:hover {
      background: var(--bg-card-hover);
      transform: translateY(-4px);
      box-shadow: var(--shadow-lg);
    }

    .card-glass {
      background: var(--glass-bg);
      border: 1px solid var(--glass-border);
    }

    .card-accent {
      border: 1px solid var(--border-accent);
      box-shadow: var(--shadow-card), 0 0 30px var(--interactive-glow);
    }

    /* ═══════════════════════════════════════════════════════════════
       BUTTONS & INPUTS
    ═══════════════════════════════════════════════════════════════ */
    .btn {
      font-family: var(--font-body);
      font-size: 0.95rem;
      font-weight: 500;
      padding: 0.875rem 1.75rem;
      border-radius: var(--radius-md);
      border: none;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      transition: all var(--duration-normal) var(--ease-bounce);
    }

    .btn-primary {
      background: var(--accent-gradient);
      color: white;
      box-shadow: var(--shadow-md);
    }

    .btn-primary:hover {
      transform: translateY(-2px) scale(1.02);
      box-shadow: var(--shadow-lg), var(--shadow-glow);
    }

    .btn-secondary {
      background: var(--bg-tertiary);
      color: var(--text-primary);
      border: 1px solid var(--border-color);
    }

    .btn-secondary:hover {
      background: var(--bg-card-hover);
      border-color: var(--border-accent);
    }

    .btn-ghost {
      background: transparent;
      color: var(--text-secondary);
    }

    .btn-ghost:hover {
      color: var(--text-primary);
      background: var(--bg-tertiary);
    }

    .input, .textarea {
      font-family: var(--font-body);
      font-size: 1rem;
      padding: 1rem 1.25rem;
      border-radius: var(--radius-md);
      border: 1px solid var(--border-color);
      background: var(--bg-card);
      color: var(--text-primary);
      width: 100%;
      transition: all var(--duration-fast);
    }

    .input:focus, .textarea:focus {
      outline: none;
      border-color: var(--accent-primary);
      box-shadow: 0 0 0 3px var(--interactive-glow);
    }

    .textarea {
      min-height: 120px;
      resize: vertical;
      font-family: var(--font-mono);
    }

    /* ═══════════════════════════════════════════════════════════════
       TOOL CAROUSEL
    ═══════════════════════════════════════════════════════════════ */
    .tool-carousel {
      display: flex;
      gap: 1rem;
      overflow-x: auto;
      padding: 1rem 0;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }

    .tool-carousel::-webkit-scrollbar {
      display: none;
    }

    .tool-card {
      flex: 0 0 auto;
      width: 140px;
      height: 160px;
      border-radius: var(--radius-lg);
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.75rem;
      scroll-snap-align: center;
      cursor: pointer;
      transition: all var(--duration-normal) var(--ease-bounce);
    }

    .tool-card:hover {
      transform: translateY(-8px) rotate(-2deg);
      border-color: var(--border-accent);
      box-shadow: var(--shadow-lg);
    }

    .tool-card.active {
      border-color: var(--accent-primary);
      box-shadow: 0 0 30px var(--interactive-glow);
    }

    .tool-icon {
      width: 48px;
      height: 48px;
      border-radius: var(--radius-sm);
      background: var(--accent-gradient);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
    }

    .tool-name {
      font-size: 0.85rem;
      font-weight: 500;
      color: var(--text-secondary);
    }

    /* ═══════════════════════════════════════════════════════════════
       CANVAS & DRAWING AREA
    ═══════════════════════════════════════════════════════════════ */
    .canvas-container {
      position: relative;
      width: 100%;
      aspect-ratio: 4/3;
      max-height: 400px;
      border-radius: var(--radius-lg);
      overflow: hidden;
      background: var(--canvas-bg);
      border: 1px solid var(--border-color);
      box-shadow: var(--shadow-md);
    }

    .canvas-container canvas {
      width: 100%;
      height: 100%;
      cursor: crosshair;
    }

    .canvas-grid {
      position: absolute;
      inset: 0;
      background-image: 
        linear-gradient(var(--canvas-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--canvas-grid) 1px, transparent 1px);
      background-size: 20px 20px;
      pointer-events: none;
    }

    .canvas-toolbar {
      position: absolute;
      bottom: 1rem;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 0.5rem;
      padding: 0.5rem;
      background: var(--glass-bg);
      backdrop-filter: blur(20px);
      border-radius: var(--radius-xl);
      border: 1px solid var(--glass-border);
      box-shadow: var(--shadow-md);
    }

    .canvas-tool {
      width: 40px;
      height: 40px;
      border-radius: var(--radius-md);
      border: none;
      background: transparent;
      color: var(--text-secondary);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all var(--duration-fast);
    }

    .canvas-tool:hover {
      background: var(--bg-tertiary);
      color: var(--text-primary);
    }

    .canvas-tool.active {
      background: var(--accent-primary);
      color: white;
    }

    /* ═══════════════════════════════════════════════════════════════
       PROMPT BUILDER
    ═══════════════════════════════════════════════════════════════ */
    .prompt-builder {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .prompt-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
    }

    .prompt-tag {
      padding: 0.5rem 1rem;
      border-radius: var(--radius-xl);
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      font-size: 0.85rem;
      color: var(--text-secondary);
      cursor: pointer;
      transition: all var(--duration-fast);
      user-select: none;
    }

    .prompt-tag:hover {
      background: var(--bg-card-hover);
      color: var(--text-primary);
    }

    .prompt-tag.selected {
      background: var(--accent-primary);
      color: white;
      border-color: var(--accent-primary);
    }

    .prompt-output {
      font-family: var(--font-mono);
      font-size: 0.9rem;
      padding: 1.25rem;
      border-radius: var(--radius-md);
      background: var(--bg-tertiary);
      border: 1px dashed var(--border-accent);
      color: var(--text-accent);
      min-height: 80px;
    }

    /* ═══════════════════════════════════════════════════════════════
       BEFORE/AFTER COMPARISON
    ═══════════════════════════════════════════════════════════════ */
    .comparison-container {
      position: relative;
      width: 100%;
      aspect-ratio: 16/10;
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow-lg);
    }

    .comparison-image {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .comparison-after {
      clip-path: inset(0 0 0 50%);
      transition: clip-path var(--duration-fast);
    }

    .comparison-slider {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      width: 4px;
      background: white;
      cursor: ew-resize;
      z-index: 10;
      box-shadow: 0 0 20px rgba(0,0,0,0.3);
    }

    .comparison-slider::before {
      content: '◀ ▶';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: white;
      padding: 0.5rem;
      border-radius: var(--radius-sm);
      font-size: 0.75rem;
      white-space: nowrap;
      box-shadow: var(--shadow-md);
    }

    /* ═══════════════════════════════════════════════════════════════
       COLOR PALETTE TOOL
    ═══════════════════════════════════════════════════════════════ */
    .palette-container {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }

    .palette-strip {
      display: flex;
      height: 80px;
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow-md);
    }

    .palette-color {
      flex: 1;
      cursor: pointer;
      transition: all var(--duration-normal) var(--ease-bounce);
      position: relative;
    }

    .palette-color:hover {
      flex: 1.5;
    }

    .palette-color::after {
      content: attr(data-hex);
      position: absolute;
      bottom: 0.5rem;
      left: 50%;
      transform: translateX(-50%);
      font-family: var(--font-mono);
      font-size: 0.7rem;
      color: white;
      text-shadow: 0 1px 3px rgba(0,0,0,0.5);
      opacity: 0;
      transition: opacity var(--duration-fast);
    }

    .palette-color:hover::after {
      opacity: 1;
    }

    .palette-input-group {
      display: flex;
      gap: 0.75rem;
    }

    .palette-input-group .input {
      flex: 1;
    }

    /* ═══════════════════════════════════════════════════════════════
       LAYER VIEWER (Photoshop-like)
    ═══════════════════════════════════════════════════════════════ */
    .layer-panel {
      background: var(--bg-card);
      border-radius: var(--radius-lg);
      border: 1px solid var(--border-color);
      overflow: hidden;
      box-shadow: var(--shadow-card);
    }

    .layer-header {
      padding: 1rem 1.25rem;
      background: var(--bg-tertiary);
      border-bottom: 1px solid var(--border-color);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .layer-list {
      max-height: 300px;
      overflow-y: auto;
    }

    .layer-item {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.75rem 1rem;
      border-bottom: 1px solid var(--border-color);
      cursor: pointer;
      transition: all var(--duration-fast);
    }

    .layer-item:hover {
      background: var(--bg-tertiary);
    }

    .layer-item.selected {
      background: var(--interactive-glow);
      border-left: 3px solid var(--accent-primary);
    }

    .layer-thumb {
      width: 36px;
      height: 36px;
      border-radius: var(--radius-sm);
      background: var(--canvas-grid);
      border: 1px solid var(--border-color);
    }

    .layer-visibility {
      width: 20px;
      height: 20px;
      border-radius: 4px;
      border: none;
      background: transparent;
      color: var(--text-muted);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .layer-visibility.visible {
      color: var(--accent-secondary);
    }

    /* ═══════════════════════════════════════════════════════════════
       PROMPT TREE (Branch Visualization)
    ═══════════════════════════════════════════════════════════════ */
    .prompt-tree {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      padding: 1rem;
    }

    .tree-node {
      display: flex;
      align-items: flex-start;
      gap: 1rem;
    }

    .tree-branch {
      width: 24px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .tree-dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: var(--accent-primary);
      box-shadow: 0 0 10px var(--accent-primary);
    }

    .tree-line {
      width: 2px;
      height: 40px;
      background: linear-gradient(to bottom, var(--accent-primary), transparent);
    }

    .tree-content {
      flex: 1;
      background: var(--bg-card);
      border-radius: var(--radius-md);
      padding: 1rem;
      border: 1px solid var(--border-color);
      cursor: pointer;
      transition: all var(--duration-fast);
    }

    .tree-content:hover {
      border-color: var(--border-accent);
      transform: translateX(4px);
    }

    .tree-label {
      display: inline-block;
      padding: 0.25rem 0.75rem;
      border-radius: var(--radius-xl);
      font-size: 0.75rem;
      font-weight: 600;
      margin-bottom: 0.5rem;
    }

    .tree-label.dreamy { background: rgba(157, 0, 255, 0.2); color: #9d00ff; }
    .tree-label.chaotic { background: rgba(255, 0, 90, 0.2); color: #ff005a; }
    .tree-label.brutalist { background: rgba(0, 238, 187, 0.2); color: #00eebb; }

    /* ═══════════════════════════════════════════════════════════════
       SLIDER COMPONENT
    ═══════════════════════════════════════════════════════════════ */
    .slider-container {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    .slider-label {
      display: flex;
      justify-content: space-between;
      font-size: 0.85rem;
    }

    .slider {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 8px;
      border-radius: 4px;
      background: var(--bg-tertiary);
      outline: none;
    }

    .slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: var(--accent-gradient);
      cursor: pointer;
      box-shadow: var(--shadow-sm);
      transition: transform var(--duration-fast);
    }

    .slider::-webkit-slider-thumb:hover {
      transform: scale(1.2);
    }

    /* ═══════════════════════════════════════════════════════════════
       MODAL OVERLAY
    ═══════════════════════════════════════════════════════════════ */
    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.7);
      backdrop-filter: blur(8px);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2000;
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--duration-normal);
    }

    .modal-overlay.active {
      opacity: 1;
      pointer-events: auto;
    }

    .modal {
      background: var(--bg-card);
      border-radius: var(--radius-xl);
      padding: 2rem;
      max-width: 90vw;
      max-height: 90vh;
      overflow-y: auto;
      border: 1px solid var(--border-color);
      box-shadow: var(--shadow-lg);
      transform: scale(0.9) translateY(20px);
      transition: transform var(--duration-normal) var(--ease-bounce);
    }

    .modal-overlay.active .modal {
      transform: scale(1) translateY(0);
    }

    .modal-close {
      position: absolute;
      top: 1rem;
      right: 1rem;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: none;
      background: var(--bg-tertiary);
      color: var(--text-secondary);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all var(--duration-fast);
    }

    .modal-close:hover {
      background: var(--accent-tertiary);
      color: white;
    }

    /* ═══════════════════════════════════════════════════════════════
       BLEND MODE DEMO
    ═══════════════════════════════════════════════════════════════ */
    .blend-demo {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
      gap: 1rem;
    }

    .blend-item {
      aspect-ratio: 1;
      border-radius: var(--radius-md);
      position: relative;
      overflow: hidden;
      cursor: pointer;
      transition: all var(--duration-normal) var(--ease-bounce);
    }

    .blend-item:hover {
      transform: scale(1.05);
      z-index: 1;
    }

    .blend-item-base {
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, #ff6b6b, #4ecdc4);
    }

    .blend-item-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(45deg, #2c3e50, #3498db);
    }

    .blend-item-label {
      position: absolute;
      bottom: 0.5rem;
      left: 50%;
      transform: translateX(-50%);
      font-size: 0.65rem;
      font-weight: 600;
      text-transform: uppercase;
      color: white;
      text-shadow: 0 1px 3px rgba(0,0,0,0.5);
      white-space: nowrap;
    }

    /* ═══════════════════════════════════════════════════════════════
       ANIMATION PRESETS
    ═══════════════════════════════════════════════════════════════ */
    .animation-gallery {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      gap: 1rem;
    }

    .animation-item {
      aspect-ratio: 1;
      border-radius: var(--radius-lg);
      background: var(--accent-gradient);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      overflow: hidden;
      position: relative;
    }

    .animation-item .preview-shape {
      width: 60%;
      height: 60%;
      background: white;
      border-radius: var(--radius-md);
    }

    .animation-item[data-anim="slide"] .preview-shape {
      animation: slideDemo 2s ease-in-out infinite;
    }

    .animation-item[data-anim="rise"] .preview-shape {
      animation: riseDemo 2s ease-in-out infinite;
    }

    .animation-item[data-anim="scatter"] .preview-shape {
      animation: scatterDemo 2s ease-in-out infinite;
    }

    .animation-item[data-anim="zoom"] .preview-shape {
      animation: zoomDemo 2s ease-in-out infinite;
    }

    @keyframes slideDemo {
      0%, 100% { transform: translateX(-30%); }
      50% { transform: translateX(30%); }
    }

    @keyframes riseDemo {
      0%, 100% { transform: translateY(20%); opacity: 0.5; }
      50% { transform: translateY(-20%); opacity: 1; }
    }

    @keyframes scatterDemo {
      0%, 100% { transform: scale(1) rotate(0deg); }
      50% { transform: scale(0.8) rotate(180deg); }
    }

    @keyframes zoomDemo {
      0%, 100% { transform: scale(0.6); }
      50% { transform: scale(1.1); }
    }

    .animation-label {
      position: absolute;
      bottom: 0.75rem;
      font-size: 0.75rem;
      font-weight: 600;
      color: white;
      text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    }

    /* ═══════════════════════════════════════════════════════════════
       CHAPTER HEADERS
    ═══════════════════════════════════════════════════════════════ */
    .chapter-number {
      font-family: var(--font-display);
      font-size: clamp(4rem, 15vw, 10rem);
      font-style: italic;
      background: var(--accent-gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      opacity: 0.15;
      position: absolute;
      top: 1rem;
      right: 2rem;
      line-height: 1;
      pointer-events: none;
    }

    .chapter-meta {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      margin-bottom: 1rem;
    }

    .chapter-badge {
      padding: 0.35rem 0.75rem;
      border-radius: var(--radius-xl);
      font-size: 0.7rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .badge-concept {
      background: rgba(157, 0, 255, 0.15);
      color: var(--accent-primary);
      border: 1px solid rgba(157, 0, 255, 0.3);
    }

    .badge-exercise {
      background: rgba(0, 238, 187, 0.15);
      color: var(--accent-secondary);
      border: 1px solid rgba(0, 238, 187, 0.3);
    }

    [data-theme="light"] .badge-concept {
      background: rgba(255, 85, 119, 0.1);
      color: #ff5577;
      border-color: rgba(255, 85, 119, 0.3);
    }

    [data-theme="light"] .badge-exercise {
      background: rgba(170, 242, 210, 0.3);
      color: #2a9d6a;
      border-color: rgba(170, 242, 210, 0.5);
    }

    /* ═══════════════════════════════════════════════════════════════
       UTILITY CLASSES
    ═══════════════════════════════════════════════════════════════ */
    .flex { display: flex; }
    .flex-col { flex-direction: column; }
    .items-center { align-items: center; }
    .justify-center { justify-content: center; }
    .justify-between { justify-content: space-between; }
    .gap-1 { gap: 0.5rem; }
    .gap-2 { gap: 1rem; }
    .gap-3 { gap: 1.5rem; }
    .gap-4 { gap: 2rem; }
    .mt-1 { margin-top: 0.5rem; }
    .mt-2 { margin-top: 1rem; }
    .mt-3 { margin-top: 1.5rem; }
    .mb-1 { margin-bottom: 0.5rem; }
    .mb-2 { margin-bottom: 1rem; }
    .text-center { text-align: center; }
    .text-accent { color: var(--text-accent); }
    .text-muted { color: var(--text-muted); }
    .text-secondary { color: var(--text-secondary); }
    .w-full { width: 100%; }
    .max-w-md { max-width: 28rem; }
    .max-w-lg { max-width: 32rem; }
    .max-w-xl { max-width: 36rem; }
    .max-w-2xl { max-width: 42rem; }
    .mx-auto { margin-left: auto; margin-right: auto; }

    .fade-up {
      opacity: 0;
      transform: translateY(20px);
      animation: fadeUp 0.6s var(--ease-smooth) forwards;
    }

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

    .stagger-1 { animation-delay: 0.1s; }
    .stagger-2 { animation-delay: 0.2s; }
    .stagger-3 { animation-delay: 0.3s; }
    .stagger-4 { animation-delay: 0.4s; }

    /* ═══════════════════════════════════════════════════════════════
       ICON STYLES
    ═══════════════════════════════════════════════════════════════ */
    .icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 1em;
      height: 1em;
    }

    .icon-lg {
      width: 1.5em;
      height: 1.5em;
    }

    /* ═══════════════════════════════════════════════════════════════
       FLOATING ELEMENTS
    ═══════════════════════════════════════════════════════════════ */
    .floating {
      animation: float 6s ease-in-out infinite;
    }

    @keyframes float {
      0%, 100% { transform: translateY(0px) rotate(0deg); }
      50% { transform: translateY(-20px) rotate(3deg); }
    }

    .floating-delayed {
      animation: float 6s ease-in-out infinite;
      animation-delay: -3s;
    }

    .pulse-glow {
      animation: pulseGlow 3s ease-in-out infinite;
    }

    @keyframes pulseGlow {
      0%, 100% { box-shadow: var(--shadow-md); }
      50% { box-shadow: var(--shadow-glow); }
    }

    /* Decorative shapes */
    .deco-circle {
      position: absolute;
      border-radius: 50%;
      background: var(--accent-gradient);
      opacity: 0.1;
      pointer-events: none;
    }

    .deco-1 {
      width: 300px;
      height: 300px;
      top: -100px;
      right: -100px;
    }

    .deco-2 {
      width: 200px;
      height: 200px;
      bottom: -50px;
      left: -50px;
    }

    /* ═══════════════════════════════════════════════════════════════
       RESPONSIVE ADJUSTMENTS
    ═══════════════════════════════════════════════════════════════ */
    @media (max-width: 768px) {
      .panel {
        padding: 1.5rem;
      }

      .card {
        padding: 1.25rem;
      }

      .tool-carousel {
        margin: 0 -1.5rem;
        padding: 1rem 1.5rem;
      }

      .blend-demo {
        grid-template-columns: repeat(3, 1fr);
      }

      .animation-gallery {
        grid-template-columns: repeat(2, 1fr);
      }

      .chapter-number {
        font-size: 4rem;
        top: 0.5rem;
        right: 1rem;
      }
    }

    @media (min-width: 1024px) {
      .panel-content {
        max-width: 600px;
      }

      .panel-a .panel-content {
        margin-left: auto;
        margin-right: 3rem;
      }

      .panel-b .panel-content {
        margin-left: 3rem;
        margin-right: auto;
      }
    }