:root{--gakumas-bg: #fffafa;--gakumas-mint: #97E7E1;--gakumas-pink: #FFB6C1;--gakumas-orange: #FABA8D;--gakumas-text: #5a4a4a;--gakumas-text-light: #8e7e7e;--gakumas-card-bg: #ffffff;--gakumas-shadow: 0 8px 32px rgba(255, 182, 193, .2);font-family:Inter,Noto Sans JP,sans-serif}*{margin:0;padding:0;box-sizing:border-box}body{background-color:var(--gakumas-bg);color:var(--gakumas-text);min-height:100vh;background-image:radial-gradient(circle at 2px 2px,rgba(151,231,225,.3) 1px,transparent 0),linear-gradient(120deg,rgba(255,182,193,.15) 0%,transparent 40%),linear-gradient(300deg,rgba(250,186,141,.15) 0%,transparent 40%);background-size:32px 32px,100% 100%,100% 100%;overflow-x:hidden}#root{max-width:1200px;margin:0 auto;padding:1rem 1rem 4rem;position:relative}.header{display:flex;justify-content:center;align-items:center;margin-bottom:.5rem;padding-top:.5rem}.site-logo{max-width:500px;width:100%;height:auto;filter:drop-shadow(0 10px 15px rgba(0,0,0,.1));animation:float 6s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.filter-container{display:flex;justify-content:center;gap:.8rem;margin-bottom:3rem;flex-wrap:wrap}.filter-btn{padding:.8rem 2.2rem;border:4px solid var(--gakumas-text);border-radius:50px;background:#fff;color:var(--gakumas-text);font-weight:900;font-size:1.1rem;cursor:pointer;transition:all .2s cubic-bezier(.175,.885,.32,1.275);box-shadow:0 6px 0 var(--gakumas-text);position:relative;overflow:hidden}.filter-btn:hover{transform:translateY(-2px);background:var(--gakumas-bg)}.filter-btn.active{background:var(--gakumas-mint);color:var(--gakumas-text);transform:translateY(2px);box-shadow:0 2px 0 var(--gakumas-text)}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:3rem}.card{background:var(--gakumas-card-bg);border:4px solid var(--gakumas-text);border-radius:20px;overflow:hidden;transition:all .4s cubic-bezier(.175,.885,.32,1.275);box-shadow:0 10px #0000001a;position:relative;padding:8px}.card:after{content:"";position:absolute;inset:0;border:4px solid white;border-radius:16px;pointer-events:none;z-index:5}.card:hover{transform:translateY(-12px) scale(1.02);box-shadow:0 20px 40px #ffb6c14d}.card-image-wrapper{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#eee;border-radius:12px;border:3px solid var(--gakumas-text)}.card-image{width:100%;height:100%;object-fit:cover;object-position:center 16%;transform:scale(1.1);transition:transform .6s cubic-bezier(.33,1,.68,1)}.card:hover .card-image{transform:scale(1.2)}.card-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#97e7e1e6;display:flex;align-items:center;justify-content:center;padding:1.5rem;opacity:0;transition:all .3s ease;z-index:10}.card:hover .card-overlay{opacity:1}.description{color:#fff;font-size:1.1rem;font-weight:800;line-height:1.5;text-align:center;transform:translateY(20px);transition:.3s ease}.card:hover .description{transform:translateY(0)}.card-info{padding:1.2rem .5rem;background:transparent}.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem;gap:.8rem}.user-name{font-size:1.5rem;font-weight:900;color:var(--gakumas-text);margin-bottom:0;flex-shrink:1}.user-id{font-size:1rem;font-weight:800;color:var(--gakumas-text);background:var(--gakumas-orange);opacity:.8;padding:2px 8px;border-radius:4px;display:inline-block;transition:all .2s ease}.user-id-wrapper{position:relative;cursor:pointer;display:inline-block}.user-id-wrapper:hover .user-id{opacity:1;transform:translateY(-2px);box-shadow:0 4px #0000001a}.copy-feedback{position:absolute;top:-25px;left:50%;transform:translate(-50%) translateY(10px);background:var(--gakumas-text);color:#fff;padding:2px 8px;border-radius:4px;font-size:.75rem;font-weight:800;opacity:0;pointer-events:none;transition:all .3s cubic-bezier(.175,.885,.32,1.275)}.user-id-wrapper.copied .copy-feedback{opacity:1;transform:translate(-50%) translateY(0)}.user-id-wrapper.copied .user-id{background:var(--gakumas-mint);color:#fff}.genre-badge{padding:.3rem .8rem;background:var(--gakumas-pink);color:#fff;font-weight:900;font-size:.75rem;border-radius:6px;z-index:10;box-shadow:3px 3px 0 var(--gakumas-text);border:2px solid var(--gakumas-text);white-space:nowrap;transform:rotate(-2deg)}.card:hover .genre-badge{transform:rotate(2deg) scale(1.1)}@media(max-width:640px){#root{padding:1rem}h1{font-size:2.5rem}.filter-container{justify-content:center;gap:.5rem}.filter-btn{padding:.6rem 1.2rem;font-size:1rem}}.footer{margin-top:4rem;padding:3rem 1rem;text-align:center;border-top:4px dashed var(--gakumas-mint);display:flex;flex-direction:column;align-items:center;gap:1.5rem}.footer-creator{font-size:1.2rem;font-weight:900;color:var(--gakumas-text);margin-bottom:.5rem}.footer-links{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}.footer-link{text-decoration:none;font-weight:900;font-size:1rem;padding:.6rem 1.5rem;border-radius:50px;transition:all .2s cubic-bezier(.175,.885,.32,1.275);border:4px solid var(--gakumas-text);box-shadow:0 4px 0 var(--gakumas-text)}.footer-link.youtube{background:var(--gakumas-pink);color:#fff}.footer-link.x-twitter{background:#fff;color:var(--gakumas-text)}.footer-link:hover{transform:translateY(-4px);box-shadow:0 8px 0 var(--gakumas-text)}.footer-link:active{transform:translateY(2px);box-shadow:0 2px 0 var(--gakumas-text)}@media(max-width:640px){.footer{padding:2rem 1rem}}