:root {
  --bg: #f7f5f0;
  --card: #ffffff;
  --navy: #1c1c2e;
  --orange: #C0634C;
  --orange-light: #fdf1ea;
  --blue: #3b7dd8;
  --border: #e8e6e0;
  --muted: #888;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Zen Kaku Gothic New', sans-serif; background: var(--bg); color: var(--navy); line-height: 1.7; display: flex; flex-direction: column; min-height: 100vh; }

.site-header { background: var(--navy); padding: 0 2rem; display: flex; align-items: center; gap: 1rem; height: 52px; position: sticky; top: 0; z-index: 100; }
.site-header a { color: #fff; text-decoration: none; font-size: 13px; opacity: 0.7; }
.site-header a:hover { opacity: 1; }
.site-header span { color: #fff; opacity: 0.3; font-size: 12px; }

.hero { background: var(--navy); padding: 3.5rem 2rem 3rem; text-align: center; position: relative; overflow: hidden; }
.hero::before { content: ''; position: absolute; top: -60px; left: 50%; transform: translateX(-50%); width: 600px; height: 300px; background: radial-gradient(ellipse, rgba(192,99,76,0.18) 0%, transparent 70%); pointer-events: none; }
.hero-badge { display: inline-block; background: var(--orange); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; padding: 4px 14px; border-radius: 99px; margin-bottom: 1.2rem; text-transform: uppercase; }
.hero h1 { font-family: 'Syne', 'Zen Kaku Gothic New', sans-serif; font-size: clamp(2rem, 6vw, 3.2rem); font-weight: 800; color: #fff; line-height: 1.15; margin-bottom: 0.8rem; }
.hero h1 span { color: var(--orange); }
.hero p { color: rgba(255,255,255,0.6); font-size: 1rem; max-width: 480px; margin: 0 auto; }

.toc-nav { background: var(--card); border-bottom: 1px solid var(--border); position: sticky; top: 52px; z-index: 90; }
.toc-inner { display: flex; overflow-x: auto; gap: 0; padding: 0 1rem; scrollbar-width: none; -ms-overflow-style: none; }
.toc-inner::-webkit-scrollbar { display: none; }
.toc-link { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0.7rem 0.9rem; text-decoration: none; color: var(--muted); font-size: 0.75rem; font-weight: 700; white-space: nowrap; border-bottom: 2px solid transparent; transition: color 0.15s, border-color 0.15s; flex-shrink: 0; }
.toc-link:hover { color: var(--navy); border-bottom-color: var(--border); }
.toc-link.active { color: var(--orange); border-bottom-color: var(--orange); }
.toc-link svg { width: 20px; height: 20px; }

.container { max-width: 1100px; margin: 0 auto; padding: 3rem 1.5rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; }

.card { background: var(--card); border-radius: 16px; border: 1px solid var(--border); overflow: hidden; transition: box-shadow 0.2s, transform 0.2s; scroll-margin-top: 120px; }
.card:hover { box-shadow: 0 8px 32px rgba(28,28,46,0.1); transform: translateY(-2px); }
.card-illo { background: #f2f0eb; padding: 2rem; display: flex; align-items: center; justify-content: center; height: 140px; }
.card-body { padding: 1.25rem 1.5rem 1.5rem; }
.card-label { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.6rem; }
.card-name-jp { font-size: 1.15rem; font-weight: 900; color: var(--navy); }
.card-name-en { font-size: 0.78rem; font-weight: 700; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }
.card-desc { font-size: 0.88rem; color: #555; margin-bottom: 1rem; line-height: 1.6; }
.bug-title { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; color: var(--orange); text-transform: uppercase; margin-bottom: 0.5rem; }
.bug-list { list-style: none; display: flex; flex-direction: column; gap: 0.35rem; }
.bug-list li { font-size: 0.82rem; color: #555; padding-left: 1.1rem; position: relative; line-height: 1.5; }
.bug-list li::before { content: '⚡'; position: absolute; left: 0; font-size: 0.75rem; }