body{display:flex;flex-direction:column;height:100vh;overflow:hidden}header{flex-shrink:0;padding:12px 20px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--border)}header h1{font-size:1.1rem;font-weight:700}header h1 span{color:var(--accent)}.back-link{color:var(--text-muted);text-decoration:none;font-size:13px;font-weight:600;letter-spacing:.03em;padding:4px 10px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--border);transition:color .15s,background .15s,border-color .15s;white-space:nowrap;margin-left:auto}.back-link:hover{color:var(--accent);background:var(--surface-hover);border-color:var(--accent)}.usage-main{display:flex;flex:1;overflow:hidden}.usage-demo{flex:0 0 58%;border-right:1px solid var(--border);position:relative}.usage-demo iframe{width:100%;height:100%;border:none;display:block}.usage-article{flex:1;overflow-y:auto;padding:28px 28px 40px;display:flex;flex-direction:column;gap:28px}.article-title{font-size:1.1rem;font-weight:700;color:var(--text);border-bottom:1px solid var(--border);padding-bottom:10px}.article-section{display:flex;flex-direction:column;gap:10px}.article-section h3{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);opacity:.7}.article-section p,.article-section ul{font-size:13px;line-height:1.85;color:var(--text-muted)}.article-section ul{list-style:none;display:flex;flex-direction:column;gap:6px;padding-left:4px}.article-section ul li::before{content:'・'}kbd{display:inline-block;font-size:11px;font-family:var(--font);background:var(--surface);border:1px solid var(--border);border-radius:4px;padding:1px 6px;color:var(--text);line-height:1.6;white-space:nowrap}.shortcut-table{width:100%;border-collapse:collapse;font-size:12px}.shortcut-table td,.shortcut-table th{text-align:left;padding:6px 8px;border-bottom:1px solid var(--border);color:var(--text-muted)}.shortcut-table th{font-weight:600;color:var(--text);opacity:.8}.shortcut-table td:first-child{white-space:nowrap;width:1%}.lang-toggle{display:flex;align-items:center;gap:4px;margin-left:auto;font-size:12px;font-weight:600}.lang-toggle a{color:var(--text-muted);text-decoration:none;padding:3px 8px;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);transition:color .15s,border-color .15s}.lang-toggle a:hover{color:var(--accent);border-color:var(--accent)}.lang-toggle span{color:var(--accent);padding:3px 8px;border-radius:var(--radius);border:1px solid var(--accent)}