@import "https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap";
.page-wrapper{padding-top:80px}.top-hero{text-align:center;padding:48px 0 40px;animation:.7s cubic-bezier(.22,1,.36,1) both fadeUp}.top-logo{width:clamp(80px,11vw,108px);filter:drop-shadow(0 6px 18px var(--accent-glow));pointer-events:none;-webkit-user-select:none;user-select:none;margin:0 auto 20px;animation:3.2s ease-in-out infinite logoPulse;display:block}.top-logo svg{width:100%;height:auto}.tagline{color:var(--text-secondary);letter-spacing:.04em;font-size:clamp(13px,1.8vw,16px);font-weight:400}.hero-desc{max-width:600px;color:var(--text-muted);margin:12px auto 0;font-size:clamp(12px,1.5vw,14px);line-height:1.8}.section-label{text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);margin-bottom:16px;padding-left:4px;font-size:14px}.tools-grid{grid-template-columns:repeat(3,1fr);gap:16px;display:grid}.tool-item{text-align:center;color:inherit;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);transition:background var(--transition), border-color var(--transition), transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s ease;flex-direction:column;align-items:center;gap:12px;padding:28px 16px 24px;text-decoration:none;animation:.5s cubic-bezier(.22,1,.36,1) both cardIn;display:flex}.tool-item:first-child{animation-delay:50ms}.tool-item:nth-child(2){animation-delay:.1s}.tool-item:nth-child(3){animation-delay:.15s}.tool-item:nth-child(4){animation-delay:.2s}.tool-item:nth-child(5){animation-delay:.25s}.tool-item:nth-child(6){animation-delay:.3s}.tool-item:nth-child(7){animation-delay:.35s}.tool-item:hover{background:var(--bg-card-hover);border-color:var(--border-hover);box-shadow:0 8px 24px color-mix(in srgb, var(--accent) 15%, transparent);transform:translateY(-4px)}.tool-icon{border-radius:var(--radius-md);flex-shrink:0;justify-content:center;align-items:center;width:56px;height:56px;font-size:28px;display:flex}.tool-item:first-child .tool-icon{background:var(--g1)}.tool-item:nth-child(2) .tool-icon{background:var(--g2)}.tool-item:nth-child(3) .tool-icon{background:var(--g3)}.tool-item:nth-child(4) .tool-icon{background:var(--g4)}.tool-item:nth-child(5) .tool-icon{background:var(--g5)}.tool-item:nth-child(6) .tool-icon{background:var(--g6)}.tool-item:nth-child(7) .tool-icon{background:var(--g7)}.tool-name{color:var(--text-primary);font-size:15px;font-weight:700}.tool-desc{color:var(--text-secondary);margin-top:2px;font-size:13px;line-height:1.5}.tool-icon--yt{color:red;background:#ff00001a!important}.tool-item--yt:hover{border-color:#ff00004d;box-shadow:0 8px 24px #ff00001f}.tool-icon--about{background:#7c3aed1a!important}.tool-item--about:hover{border-color:#7c3aed4d;box-shadow:0 8px 24px #7c3aed26}body.light .tool-icon--yt{background:#ff000012!important}body.light .tool-icon--about{background:#6d28d912!important}@media (max-width:768px){.tools-grid{grid-template-columns:repeat(2,1fr);gap:12px}.tool-item{padding:20px 12px 18px}.tool-icon{width:48px;height:48px;font-size:24px}}@media (max-width:480px){.tools-grid{grid-template-columns:1fr}.tool-item{text-align:left;flex-direction:row;gap:14px;padding:16px 18px}.tool-icon{width:44px;height:44px;font-size:22px}}.tools-section{margin-bottom:40px}.tools-grid{grid-template-columns:repeat(4,1fr);gap:10px}.tool-item{text-align:left;flex-direction:row;align-items:center;gap:12px;min-width:0;padding:12px 14px}.tool-item>div:last-child{min-width:0}.tool-icon{border-radius:10px;width:40px;height:40px;font-size:20px}.tool-icon--yt svg{width:22px;height:22px}.tool-name{white-space:nowrap;text-overflow:ellipsis;font-size:13.5px;overflow:hidden}.tool-desc{-webkit-line-clamp:1;-webkit-box-orient:vertical;margin-top:1px;font-size:11.5px;line-height:1.4;display:-webkit-box;overflow:hidden}.tool-item:hover{transform:translateY(-2px)}@media (max-width:1024px){.tools-grid{grid-template-columns:repeat(3,1fr)}}@media (max-width:768px){.tools-grid{grid-template-columns:repeat(2,1fr);gap:8px}.tool-item{gap:8px;padding:10px 8px}.tool-name{white-space:normal;letter-spacing:-.01em;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:12px;line-height:1.3;display:-webkit-box}.tool-icon{width:36px;height:36px;font-size:18px}.tool-desc{display:none}}@media (max-width:480px){.tools-grid{grid-template-columns:repeat(2,1fr)}.tool-item{flex-direction:row;gap:8px;padding:10px 8px}.tool-icon{width:32px;height:32px;font-size:16px}.tool-name{font-size:11.5px}}