:root { --bg: #f6f4ef; --surface: #ffffff; --text: #23211d; --text-secondary: #6b675f; --hairline: #e4e0d8; --accent: #4e4e9e; --accent-tint: #ecebf6; --radius: 16px; --maxw: 820px; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.75; font-size: 17px; } /* Language visibility (toggled via ) */ html[data-lang="en"] .lang-ja { display: none !important; } html[data-lang="ja"] .lang-en { display: none !important; } a { color: var(--accent); } header.site { position: sticky; top: 0; z-index: 10; background: rgba(246, 244, 239, 0.92); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--hairline); } .bar { max-width: var(--maxw); margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; gap: 12px; } .bar .brand { font-weight: 700; font-size: 16px; letter-spacing: 0.02em; text-decoration: none; color: var(--text); } .bar .spacer { flex: 1; } .lang-switch { display: inline-flex; border: 1px solid var(--hairline); border-radius: 999px; overflow: hidden; background: var(--surface); } .lang-switch button { border: 0; background: transparent; color: var(--text-secondary); font: inherit; font-size: 14px; padding: 6px 14px; cursor: pointer; min-height: 34px; } .lang-switch button.active { background: var(--accent); color: #fff; } main { max-width: var(--maxw); margin: 0 auto; padding: 28px 20px 80px; } h1 { font-size: 30px; line-height: 1.3; margin: 24px 0 8px; } h2 { font-size: 22px; margin: 44px 0 12px; padding-top: 10px; border-top: 1px solid var(--hairline); } h3 { font-size: 18px; margin: 26px 0 6px; } .lead { color: var(--text-secondary); font-size: 18px; margin-top: 0; } ul, ol { padding-left: 1.3em; } li { margin: 6px 0; } .card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 18px 20px; margin: 18px 0; } .note { background: var(--accent-tint); border: 1px solid #d9d8ee; border-radius: var(--radius); padding: 14px 18px; margin: 18px 0; } .steps { counter-reset: step; list-style: none; padding-left: 0; } .steps > li { position: relative; padding-left: 44px; margin: 14px 0; } .steps > li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 2px; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 15px; } figure { margin: 18px 0; text-align: center; } figure img { max-width: 300px; width: 100%; border: 1px solid var(--hairline); border-radius: 22px; box-shadow: 0 10px 30px rgba(0,0,0,0.08); background: #fff; } figcaption { color: var(--text-secondary); font-size: 14px; margin-top: 8px; } .shots { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; } .shots figure { flex: 1 1 240px; max-width: 300px; } table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 15px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; } th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--hairline); } th { background: #f0eee8; font-weight: 600; } tr:last-child td { border-bottom: 0; } code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: #efece6; padding: 1px 6px; border-radius: 6px; font-size: 0.92em; } pre.mono { display: block; padding: 14px 16px; overflow-x: auto; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--surface); } .btn { display: inline-block; background: var(--accent); color: #fff; text-decoration: none; padding: 12px 22px; border-radius: 999px; font-weight: 600; margin: 6px 8px 6px 0; } .btn.secondary { background: var(--accent-tint); color: var(--accent); } footer.site { border-top: 1px solid var(--hairline); color: var(--text-secondary); font-size: 14px; } footer.site .bar { justify-content: center; gap: 18px; flex-wrap: wrap; } .muted { color: var(--text-secondary); }