.example-detail{--detail-editor-height:320px;--detail-action-height:44px;--detail-surface:var(--surface);--detail-border:var(--border);--detail-editor-surface:#0d0f14;--detail-editor-text:var(--text);--detail-editor-label-text:var(--text-muted);--detail-preview-bg:#f3f4f6;--detail-accent:var(--accent);--detail-radius:var(--radius-md);background:var(--detail-surface);flex-direction:column;min-height:calc(100vh - 100px);margin-top:30px;display:flex}.detail-body{flex-direction:row;flex:1;min-height:0;display:flex}.action-bar{height:var(--detail-action-height);border-bottom:1px solid var(--detail-border);background:var(--detail-surface);flex-shrink:0;align-items:center;gap:8px;padding:0 16px;display:flex}.action-bar-buttons{gap:6px;display:flex}.action-bar-spacer{flex:1}.action-bar-install{align-items:center;gap:10px;display:flex}.action-bar-hint{color:var(--detail-editor-label-text);white-space:nowrap;font-size:12px}.action-btn{border:1px solid var(--detail-border);color:var(--detail-editor-text);border-radius:var(--detail-radius);cursor:pointer;white-space:nowrap;background:0 0;align-items:center;padding:5px 10px;font-family:inherit;font-size:12px;font-weight:500;line-height:1.4;text-decoration:none;transition:background .15s,border-color .15s;display:inline-flex}.action-btn:hover{background:#ffffff0f;border-color:#fff3}.code-editor{border-right:1px solid var(--detail-border);flex-direction:row;flex:0 0 45%;display:flex;overflow:hidden}.code-pane{flex-direction:column;flex:1;min-width:0;display:flex;overflow:hidden}.code-divider{background:var(--detail-border);flex-shrink:0;width:1px}.code-pane-label{letter-spacing:.06em;text-transform:uppercase;color:var(--detail-editor-label-text);border-bottom:1px solid var(--detail-border);background:var(--detail-editor-surface);flex-shrink:0;padding:7px 12px 6px;font-size:11px;font-weight:600;display:block}.code-textarea{resize:none;background:var(--detail-editor-surface);width:100%;height:100%;color:var(--detail-editor-text);tab-size:2;border:none;outline:none;flex:1;padding:12px;font-family:ui-monospace,SF Mono,Cascadia Code,Fira Code,monospace;font-size:13px;line-height:1.6}.example-preview{flex:1;position:relative;overflow:hidden}.preview-frame{background:var(--detail-preview-bg);border:none;width:100%;height:100%;display:block}.detail-toast{color:#f1f5f9;border-radius:var(--detail-radius);z-index:9999;pointer-events:none;white-space:nowrap;background:#1e293b;padding:8px 16px;font-size:13px;font-weight:500;position:fixed;bottom:16px;left:50%;transform:translate(-50%)}@media (max-width:768px){.detail-body{flex-direction:column}.code-editor{border-right:none;border-bottom:1px solid var(--detail-border);flex:none;height:300px}.action-bar-hint{display:none}}