:root {--bg: #f5f5f5;--primary: #ffcc00;--secondary: #00b3ff;--accent: #ff5c5c;--text: #111;--border: #000;} * {box-sizing: border-box;} .main-content section {padding: 10px 10px;} header {background: var(--primary);border-bottom: 5px solid var(--border);padding: 3rem 1.5rem;} header h1 {color: #202020;font-size: 2rem; margin: 0 0 1rem;} header p {font-size: 1.2rem; max-width: 800px;color: #202020;} .main {max-width: 1100px;margin: 0 auto;padding: 1rem 1rem;color: #ebe1e1;} .episode-card {background: var(--secondary);color: #202020;border: 5px solid var(--border);box-shadow: 8px 8px 0 var(--border);padding: 1.5rem;display: flex;flex-direction: column;justify-content: space-between;transition: transform 0.2s ease;} .episode-card:hover {transform: translateY(-5px);border-color: var(--primary);} .episode-card p {flex-grow: 1;} .episode-card a {margin-top: 1rem;display: inline-block;color: var(--secondary);background: var(--accent);padding: 0.5rem 1rem;font-weight: 700;border: 3px solid var(--border);box-shadow: 4px 4px 0 var(--border);text-align: center;transition: all 0.2s ease;} .episode-card a:hover {background: var(--primary);color: var(--bg);transform: translateY(-2px);} .grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));gap: 1.5rem;} .image-placeholder {background: var(--secondary);border: 4px solid var(--border);height: 180px;display: flex;align-items: center;justify-content: center;font-weight: 700;text-align: center;box-shadow: 6px 6px 0 var(--border);margin: 2rem 0;} ul {padding-left: 1.2rem;} li {margin-bottom: 0.5rem;} .callout {background: var(--primary);color: #252525;border: 4px solid var(--border);box-shadow: 8px 8px 0 var(--border);padding: 1.5rem;margin: 2.5rem 0;font-size: 1.2rem;font-weight: 600;max-width: 700px;} .episode-nav {display: flex;color: #e4e2e2;justify-content: space-between;align-items: center;background-color: #525151; border-top: 4px solid #000;padding: 1rem 2rem;font-family: 'Arial', sans-serif;text-transform: uppercase;} .episode-nav a {text-decoration: none;color: #fd0505;font-weight: bold;border: 2px solid #000;padding: 0.5rem 1rem; transition: all 0.2s ease-in-out;} .episode-nav a:hover {background-color: #000;color: #fff;} .episode-counter {font-weight: bold;font-size: 0.95rem;color: #000;} .highlight {background: var(--primary);padding: 0.2rem 0.4rem;border: 2px solid var(--border);font-weight: 600;} @keyframes snapIn {0% {transform: translate(20px, 20px);opacity: 0;} 60% {transform: translate(-4px, -4px);opacity: 1;} 100% {transform: translate(0, 0);}} .episode-card {animation: snapIn 0.6s ease-out both;transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;} .episode-card:nth-child(1) { animation-delay: 0.05s; } .episode-card:nth-child(2) { animation-delay: 0.1s; } .episode-card:nth-child(3) { animation-delay: 0.15s; } .episode-card:hover {transform: translate(-4px, -4px);box-shadow: 12px 12px 0 var(--border);} .episode-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));gap: 2rem;} .scrolly {display: grid;grid-template-columns: 1fr 2fr;gap: 1.5rem;align-items: start;} .scrolly-visual {position: sticky;top: 80px;} .visual-frame {height: 100%;background: var(--secondary);border: 5px solid var(--border);box-shadow: 10px 10px 0 var(--border);display: flex;align-items: center;justify-content: center;padding: 1rem;text-align: center;font-size: 1.5rem;font-weight: 700;transition: all 0.3s ease-out;} .scrolly-content {display: flex; flex-direction: column;} .step {min-height: 60vh;padding: 1rem 1rem;border-left: 5px solid transparent;transition: border-color 0.3s ease-out;} .step.is-active {border-color: var(--accent);} .scrolly-visual .visual-frame {width: 100%;} .image-placeholder img {width: 100%;max-width: 100%;height: auto;display: block;} .image-placeholder {width: 100%;max-width: 100%;border: 3px solid #ff9800;background-color: #1e1e1e;margin: 1rem 0;box-shadow: 6px 6px 0 #000;display: block;padding: 0;} .image-placeholder img {width: 100%;max-width: 100%;height: auto;display: block;} .image-placeholder:hover {background-color: #102f32;} .image-placeholder.image-fill {border: 3px solid #ff9800;background-color: #1e1e1e;display: block;height: auto;padding: 0;overflow: hidden;} .image-placeholder.image-fill img {width: 100%;max-width: 100%;height: auto;display: block;margin: 0;} @media (max-width: 900px) {.scrolly {grid-template-columns: 1fr 2fr;} .scrolly-visual {position: sticky;top: 70px;} .visual-frame {aspect-ratio: 16 / 9;min-height: 180px;}} @media (max-width: 520px) { .scrolly {grid-template-columns: 1fr 2fr;} .scrolly-visual {position: sticky;margin-bottom: 1.5rem;}}