:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:#ffffffde;background-color:#121212;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--color-yellow: #FCDA9A;--color-yellow-dark: #F9CE80;--color-green: #B5E8B9;--color-green-dark: #9CDEA1;--color-pink: #FFBFD7;--color-pink-dark: #FFAAC9;--color-turquoise: #9AE5E6;--color-turquoise-dark: #7EDADB;--color-blue: #A2C7FF;--color-blue-dark: #8AB7FA;--color-peach: #FFCBA4;--color-peach-dark: #FFB989;--color-lavender: #D5BEFF;--color-lavender-dark: #C5A8FA;--color-mint: #A9ECD0;--color-mint-dark: #8EE2C2}a{font-weight:500;color:#8c9eff;text-decoration:inherit}a:hover{color:#a5b4ff}body{margin:0;padding:0;min-width:320px;min-height:100vh}h1{font-size:2.5em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:all .25s}button:hover{border-color:#8c9eff;background-color:#2a2a2a}button:focus,button:focus-visible{outline:2px solid #8c9eff}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}*{box-sizing:border-box;margin:0;padding:0}body{font-family:"Helvetica Neue""Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;background-color:#121212;color:#e0e0e0;line-height:1.6}#root{width:100%;min-height:100vh}.app{width:100%;min-height:100vh;display:flex;flex-direction:column}.app-header{padding:7rem 1rem 2rem;text-align:center}.app-header h1{font-size:3.2rem;margin-bottom:.5rem;color:#ddd}.app-header p{font-size:1.2rem;color:#666}main{flex:1;padding:1rem;width:100%}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.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}.category-header{display:flex;flex-direction:column;align-items:center;gap:30px}.back-button{background-color:#333;color:#fff;border:none;padding:8px 15px;border-radius:4px;cursor:pointer;font-size:.9rem;transition:background-color .2s}.back-button:hover{background-color:#444}.app-footer{padding:1.5rem;text-align:center;font-size:.8rem;color:#666}.email-link{color:#666;text-decoration:none;transition:color .2s ease}.email-link:hover{color:#999}.category-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px;padding:20px;max-width:1200px;margin:0 auto;position:relative}.category-card{background-color:#2a2a2a;border-radius:8px;padding:20px;box-shadow:0 4px 8px #0003;transition:transform .2s,box-shadow .2s;cursor:pointer;aspect-ratio:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative;overflow:hidden}.category-card:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-color:#0009;z-index:1}.category-card:hover{transform:translateY(-5px);box-shadow:0 6px 12px #0000004d}.category-card h3{margin:0;font-size:1.2rem;color:#fff;word-break:break-word;font-weight:500;z-index:2;position:relative}.category-card .project-count{position:absolute;bottom:0;left:0;right:0;background:#0000004d;color:#ffffffb3;padding:5px 0;font-size:.8rem;font-weight:300;z-index:2}.loading,.no-categories{text-align:center;padding:3rem;font-size:1.2rem;color:#b3b3b3;width:100%;grid-column:1 / -1}@media (max-width: 768px){.category-grid{grid-template-columns:repeat(2,1fr);gap:15px;padding:15px}.category-card h3{font-size:1rem}}.project-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px;padding:20px;max-width:1200px;margin:0 auto}.project-card{background-color:#2a2a2a;border-radius:8px;padding:20px;box-shadow:0 4px 8px #0003;transition:all .3s ease;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:200px;position:relative;overflow:hidden}.project-card:hover{transform:translateY(-5px);box-shadow:0 6px 12px #0000004d}.project-card.active{box-shadow:0 6px 12px #0000004d;transform:translateY(-5px)}.project-card.selected{box-shadow:0 8px 16px #0006;border-width:2px;border-style:solid;padding:18px}.project-card.active.selected{border-color:#0000004d}.project-card h3{margin:0;font-size:1.2rem;color:#fff;word-break:break-word;font-weight:500;z-index:2}.project-card .date{position:absolute;bottom:0;left:0;right:0;background:#0000004d;color:#ffffffb3;padding:5px 0;font-size:.8rem;font-weight:300;z-index:2}.project-card .date-active{background:#0003;color:#000000b3}.audio-indicator{position:absolute;right:10px;top:10px;display:flex;gap:2px;z-index:2}.audio-indicator span{display:block;width:3px;height:10px;background-color:#8c9eff;border-radius:1px;opacity:.4}.audio-indicator.playing span{animation:audio-bounce 1.5s infinite ease-in-out;opacity:1}.project-card.active .audio-indicator span{background-color:#0009}.audio-indicator.playing span:nth-child(1){animation-delay:0s;height:10px}.audio-indicator.playing span:nth-child(2){animation-delay:.2s;height:14px}.audio-indicator.playing span:nth-child(3){animation-delay:.4s;height:8px}@keyframes audio-bounce{0%,to{transform:scaleY(1)}50%{transform:scaleY(1.5)}}.no-audio{position:absolute;right:10px;top:10px;font-size:.7rem;color:#ffffff80;background-color:#0003;padding:3px 6px;border-radius:4px;z-index:2}.project-card.active .no-audio{color:#0009;background-color:#0000001a}.loading,.no-projects{text-align:center;padding:3rem;font-size:1.2rem;color:#b3b3b3;width:100%;grid-column:1 / -1}@media (max-width: 768px){.project-grid{grid-template-columns:repeat(2,1fr);gap:15px;padding:15px}.project-card{min-height:150px}.project-card h3{font-size:1rem}.audio-indicator{right:5px;top:5px}.no-audio{right:5px;top:5px;font-size:.6rem}}