/* ── How to Play Accordion ──────────────────────────────────────────────── */ .htp-section { width: 100%; max-width: 680px; margin: 1.5rem auto 0; padding: 0 1rem 2rem; font-family: 'Inter', system-ui, sans-serif; } .htp-section h2 { font-size: 1rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.55; margin: 0 0 0.75rem; } /* Card shell */ .htp-section details { border-radius: 12px; margin-bottom: 0.5rem; overflow: hidden; /* glass-card feel — falls back gracefully */ background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); transition: background 0.2s; } .htp-section details[open] { background: rgba(255, 255, 255, 0.09); } /* Summary row (the clickable toggle) */ .htp-section summary { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.85rem 1.1rem; cursor: pointer; font-size: 0.95rem; font-weight: 600; list-style: none; user-select: none; -webkit-user-select: none; } .htp-section summary::-webkit-details-marker { display: none; } .htp-section summary .htp-icon { font-size: 1.1rem; flex-shrink: 0; } .htp-section summary .htp-title { flex: 1; } /* Chevron */ .htp-section summary .htp-chevron { flex-shrink: 0; width: 18px; height: 18px; opacity: 0.5; transition: transform 0.25s ease; } .htp-section details[open] summary .htp-chevron { transform: rotate(180deg); opacity: 1; } /* Body */ .htp-section .htp-body { padding: 0 1.1rem 1rem; font-size: 0.875rem; line-height: 1.65; opacity: 0.85; } .htp-section .htp-body p { margin: 0 0 0.5rem; } .htp-section .htp-body p:last-child { margin-bottom: 0; } .htp-section .htp-body ul { margin: 0.25rem 0 0.5rem 1.1rem; padding: 0; } .htp-section .htp-body ul li { margin-bottom: 0.3rem; } .htp-section .htp-body strong { font-weight: 600; opacity: 1; } /* Key badges */ .htp-key { display: inline-block; padding: 1px 7px; border-radius: 5px; font-size: 0.78rem; font-weight: 600; font-family: monospace; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2); margin: 0 1px; vertical-align: middle; } /* ── Light-theme overrides ─────────────────────────────────────────────── */ /* Supports data-theme="light" on */ [data-theme="light"] .htp-section details, .light-theme .htp-section details { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.1); } [data-theme="light"] .htp-section details[open], .light-theme .htp-section details[open] { background: rgba(0, 0, 0, 0.06); } [data-theme="light"] .htp-key, .light-theme .htp-key { background: rgba(0,0,0,0.08); border-color: rgba(0,0,0,0.18); }