.video-sort-select{background:linear-gradient(90deg,#fffbe7,#c1e7ff);border:2px solid #ff7eb9;border-radius:8px;box-shadow:0 2px 8px #ff7eb944;color:#ff7eb9;font-family:Comic Sans MS,Segoe UI,Arial,sans-serif;font-size:1rem;font-weight:700;margin-left:.5rem;outline:none;padding:.3rem 1.2rem .3rem .7rem;transition:border-color .2s,box-shadow .2s}.video-sort-select:focus,.video-sort-select:hover{border-color:#ffe066;box-shadow:0 4px 16px #ffe06644}body{align-items:center;background:linear-gradient(135deg,#f7c1fc,#c1e7ff);display:flex;font-family:Comic Sans MS,Segoe UI,Arial,sans-serif;justify-content:center;min-height:100vh}#root{margin:0 auto;max-width:1400px;padding:2rem;text-align:center}.logo{height:6em;padding:1.5em;transition:filter .3s;will-change:filter}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}.emily-app{background:#fffbe7;border:4px solid #ffe066;border-radius:32px;box-shadow:0 4px 32px #646cff1f;margin:0 auto;max-width:1100px;overflow:hidden;padding-bottom:2.5rem}.emily-header{align-items:center;background:linear-gradient(90deg,#f7c1fc,#c1e7ff);border-bottom:2px dashed #ffe066;display:flex;gap:2rem;padding:2.5rem 2rem 1.5rem}.emily-pic{background:#fffbe7;border:4px solid #ff7eb9;border-radius:50%;box-shadow:0 2px 12px #ff7eb9aa;height:110px;object-fit:cover;transition:transform .2s,box-shadow .2s,background .2s;width:110px}.emily-pic:hover{background:#fffbe7;box-shadow:0 6px 24px #ff7eb988;transform:translateY(-6px) scale(1.05) rotate(-2deg)}.emily-header h1{color:#ff7eb9;font-family:Comic Sans MS,Segoe UI,Arial,sans-serif;font-size:2.5rem;margin:0;text-shadow:1px 1px 0 #fff,2px 2px 0 #ffe066}.emily-header p{color:#444;font-family:Comic Sans MS,Segoe UI,Arial,sans-serif;font-size:1.2rem;margin:.7rem 0 0}.yt-card-list{display:grid;gap:2.5rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));justify-items:center;margin-top:2.5rem;padding:0 2rem}.yt-card{align-items:center;background:#e0f7fa;border:3px solid #ff7eb9;border-radius:18px;box-shadow:0 2px 12px #7ed6ff88;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;margin:0 .5rem;max-width:100%;outline:none;padding:1.2rem 1rem 1rem;position:relative;transition:transform .2s,box-shadow .2s;width:100%}.yt-card:focus,.yt-modal-close:focus,.yt-card:focus-visible{outline:3px solid #ff7eb9;outline-offset:2px}.yt-card:hover{background:#fffbe7;box-shadow:0 6px 24px #ff7eb988;transform:translateY(-6px) scale(1.05) rotate(-2deg)}.yt-thumb{aspect-ratio:16/9;border:2px solid #ffe066;border-radius:12px;box-shadow:0 2px 8px #ffe06644;height:auto;margin-bottom:.8rem;max-width:100%;width:100%}.yt-title{color:#ff7eb9;font-family:Comic Sans MS,Segoe UI,Arial,sans-serif;font-size:1.1rem;font-weight:700;text-align:center;text-shadow:1px 1px 0 #fff,2px 2px 0 #ffe066}.yt-subscribe-link{color:#ff7eb9;text-decoration:underline}.yt-subscribe-link:hover,.yt-subscribe-link:focus{color:#ff7eb9;text-decoration:none}@media (max-width: 900px){.emily-app{border-radius:18px;max-width:98vw;padding-bottom:1rem}.emily-header{flex-direction:column;gap:1rem;padding:1.2rem 1rem 1rem}.yt-card-list{gap:1rem;grid-template-columns:1fr}.yt-card{max-width:320px;padding:1rem;width:98vw}.yt-thumb{aspect-ratio:16/9;height:auto;max-width:320px;width:100%}}:root{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;background-color:#242424;color:#ffffffde;color-scheme:light dark;font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;font-synthesis:none;font-weight:400;line-height:1.5;text-rendering:optimizeLegibility}a{color:#646cff;font-weight:500;text-decoration:inherit}a:hover{color:#535bf2}body{display:flex;margin:0;min-height:100vh;min-width:320px;place-items:center}h1{font-size:3.2em;line-height:1.1}button{background-color:#1a1a1a;border:1px solid transparent;border-radius:8px;cursor:pointer;font-family:inherit;font-size:1em;font-weight:500;padding:.6em 1.2em;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{background-color:#fff;color:#213547}a:hover{color:#747bff}button{background-color:#f9f9f9}}
