* { box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; margin: 0; background: #fafafa; color: #222; line-height: 1.6; }
header { text-align: center; padding: 2rem 1rem; background: #f3f4f6; }
h1 { margin: 0 0 .25rem 0; font-size: clamp(1.6rem, 3vw, 2.4rem); }
h2 { margin: 2rem 0 0.75rem; font-size: clamp(1.2rem, 2.2vw, 1.6rem); border-bottom: 2px solid #e5e7eb; padding-bottom: .4rem; }
h3 { margin: .6rem 0 .4rem; }
.section { max-width: 980px; margin: auto; padding: 1rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.card { background: #fff; border-radius: 10px; padding: 1rem; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.card ul { margin: .5rem 0 0; padding-left: 1.1rem; }
iframe { width: 100%; aspect-ratio: 16/9; border: none; border-radius: 8px; }
.note { font-size: .95rem; color: #555; }
.cta { text-align: center; margin: 3rem 0; }
.cta a { background: #2563eb; color: #fff; display: inline-block; padding: .9rem 1.4rem; border-radius: 8px; text-decoration: none; font-weight: 700; }
.cta a:hover { filter: brightness(.95); }
footer { text-align: center; font-size: .9rem; color: #666; padding: 2rem 1rem 3rem; }
.topnav { position: sticky; top: 0; background: #ffffffee; backdrop-filter: blur(6px); border-bottom: 1px solid #eee; z-index: 10; }
.topnav .inner { max-width: 980px; margin: auto; display: flex; align-items: center; justify-content: space-between; padding: .6rem 1rem; }
.topnav a { text-decoration: none; color: #2563eb; font-weight: 600; }
.badge { display: inline-block; font-size: .75rem; background: #eef2ff; color: #3730a3; padding: .2rem .5rem; border-radius: 999px; }
kbd { background:#111; color:#fff; border-radius: 6px; padding: .15rem .3rem; font-size: .75rem;}