[data-resize-handle=true]{--rap-handle-hover-color: rgba(0, 102, 204, .4);--rap-handle-active-color: rgba(0, 102, 204, .8);--rap-handle-z-index: 50;--rap-handle-transition: all .2s ease;flex-shrink:0;position:relative;z-index:var(--rap-handle-z-index);background:transparent}[data-resize-handle=true][data-direction=horizontal]{margin-left:-2px;margin-right:-2px}[data-resize-handle=true][data-direction=vertical]{margin-top:-2px;margin-bottom:-2px}[data-resize-handle=true]:before{content:"";position:absolute;background:transparent;transition:var(--rap-handle-transition);pointer-events:none}[data-resize-handle=true][data-direction=horizontal]:before{top:0;left:50%;bottom:0;width:1px;transform:translate(-50%)}[data-resize-handle=true][data-direction=vertical]:before{left:0;top:50%;right:0;height:1px;transform:translateY(-50%)}[data-resize-handle=true][data-direction=horizontal]:hover:before{width:2px;background:var(--rap-handle-hover-color)}[data-resize-handle=true][data-direction=vertical]:hover:before{height:2px;background:var(--rap-handle-hover-color)}[data-resize-handle=true][data-direction=horizontal]:active:before{width:3px;background:var(--rap-handle-active-color)}[data-resize-handle=true][data-direction=vertical]:active:before{height:3px;background:var(--rap-handle-active-color)}[data-panel=true]{flex-shrink:0;overflow:auto}.code-viewer-button{padding:.5rem 1rem;background:#238636;color:#fff;border:none;border-radius:6px;font-size:.875rem;font-weight:500;cursor:pointer;transition:background .2s}.code-viewer-button:hover{background:#2ea043}.code-viewer-modal{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000;padding:2rem}.code-viewer-content{background:#0d1117;border:1px solid #30363d;border-radius:12px;max-width:900px;width:100%;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 8px 24px #00000080}.code-viewer-header{padding:1.5rem;border-bottom:1px solid #30363d;display:flex;justify-content:space-between;align-items:center}.code-viewer-header h3{margin:0;font-size:1.25rem;color:#c9d1d9}.code-viewer-actions{display:flex;gap:.75rem}.code-viewer-copy-btn,.code-viewer-close-btn{padding:.5rem 1rem;border:1px solid #30363d;border-radius:6px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s}.code-viewer-copy-btn{background:#238636;color:#fff;border-color:#238636}.code-viewer-copy-btn:hover{background:#2ea043;border-color:#2ea043}.code-viewer-close-btn{background:#21262d;color:#c9d1d9}.code-viewer-close-btn:hover{background:#30363d}.code-viewer-pre{margin:0;padding:1.5rem;overflow:auto;flex:1;background:#0d1117;border-radius:0 0 12px 12px}.code-viewer-pre code{font-family:SF Mono,Monaco,Inconsolata,Fira Code,Fira Mono,Roboto Mono,Courier New,monospace;font-size:.875rem;line-height:1.6;color:#c9d1d9;background:none;padding:0}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#0d1117;color:#c9d1d9}code{font-family:Courier New,Courier,monospace;background-color:#161b22;padding:2px 6px;border-radius:3px;font-size:.9em}#root{width:100%;height:100%}.app{display:flex;flex-direction:column;width:100%;height:100%;overflow:auto}.app-header{background:linear-gradient(135deg,#1f6feb,#0969da);padding:1.25rem 1.5rem 1rem;box-shadow:0 2px 8px #0000004d;z-index:10}.header-content{max-width:1400px;margin:0 auto;display:flex;justify-content:space-around}.app-header h1{font-size:1.5rem;font-weight:600;color:#fff;margin-bottom:.375rem}.subtitle{color:#ffffffe6;font-size:.875rem;margin-bottom:.75rem}.header-links{display:flex;gap:.75rem;flex-wrap:wrap;align-content:center}.header-links a{color:#fff;text-decoration:none;padding:.4rem .875rem;background:#fff3;border-radius:6px;font-size:.8125rem;font-weight:500;transition:background .2s}.header-links a:hover{background:#ffffff4d}.main-content{flex:1;overflow:auto;min-height:0}.demo-container{height:100%}.sidebar-panel{background-color:#161b22;border-right:1px solid #30363d}.sidebar{height:100%;display:flex;flex-direction:column;padding:1rem;overflow-y:auto}.sidebar h2{font-size:1rem;margin-bottom:.875rem;color:#f0f6fc}.demo-nav{display:flex;flex-direction:column;gap:.5rem}.demo-nav-item{text-align:left;padding:.75rem;background:#0d1117;border:1px solid #30363d;border-radius:6px;cursor:pointer;transition:all .2s;color:#c9d1d9}.demo-nav-item:hover{background:#161b22;border-color:#58a6ff}.demo-nav-item.active{background:#1f6feb;border-color:#1f6feb;color:#fff}.demo-nav-title{font-weight:600;font-size:.95rem;margin-bottom:.25rem}.demo-nav-description{font-size:.8rem;opacity:.8;line-height:1.4}.demo-panel{background-color:#0d1117}.demo-content{height:100%;display:flex;flex-direction:column;padding:1rem;overflow:auto}.demo-header{margin-bottom:1rem;display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}.demo-header h2{font-size:1.125rem;margin-bottom:.375rem;color:#f0f6fc}.demo-header p{color:#8b949e;font-size:.8125rem}.demo-viewer{flex:1;background:#0d1117;border-radius:8px;overflow:auto;min-height:0}.app-footer{background-color:#161b22;border-top:1px solid #30363d;padding:1rem 2rem;text-align:center;color:#8b949e;font-size:.875rem}.demo-example{height:100%;width:100%;display:flex;flex-direction:column;overflow:auto}.panel-content{height:100%;padding:1rem;display:flex;flex-direction:column;gap:.75rem}.panel-header{font-size:.9375rem;font-weight:600;color:#f0f6fc;padding-bottom:.375rem;border-bottom:2px solid #30363d}.panel-body{flex:1;color:#8b949e;line-height:1.6}.panel-blue{background:linear-gradient(135deg,#1f2937,#111827);border-top:1px solid #374151;border-bottom:1px solid #374151}.panel-purple{background:linear-gradient(135deg,#2e1065,#1e1b4b);border-top:1px solid #4c1d95;border-bottom:1px solid #4c1d95}.panel-green{background:linear-gradient(135deg,#064e3b,#022c22);border-top:1px solid #065f46;border-bottom:1px solid #065f46}.panel-orange{background:linear-gradient(135deg,#7c2d12,#431407);border-top:1px solid #9a3412;border-bottom:1px solid #9a3412}.panel-red{background:linear-gradient(135deg,#7f1d1d,#450a0a);border-top:1px solid #991b1b;border-bottom:1px solid #991b1b}.panel-teal{background:linear-gradient(135deg,#134e4a,#042f2e);border-top:1px solid #115e59;border-bottom:1px solid #115e59}.panel-indigo{background:linear-gradient(135deg,#312e81,#1e1b4b);border-top:1px solid #3730a3;border-bottom:1px solid #3730a3}.control-panel{display:flex;flex-direction:column;gap:1rem;padding:1rem;background:#161b22;border-radius:6px;margin-bottom:1rem}.control-group{display:flex;flex-direction:column;gap:.5rem}.control-label{font-size:.9rem;font-weight:600;color:#f0f6fc}.button-group{display:flex;gap:.5rem;flex-wrap:wrap}.btn{padding:.5rem 1rem;background:#1f6feb;color:#fff;border:none;border-radius:6px;font-size:.9rem;font-weight:500;cursor:pointer;transition:background .2s}.btn:hover{background:#1a5cd7}.btn:active{transform:translateY(1px)}.btn-secondary{background:#30363d}.btn-secondary:hover{background:#484f58}.event-log{background:#0d1117;border:1px solid #30363d;border-radius:6px;padding:1rem;height:150px;overflow-y:auto;font-family:Courier New,Courier,monospace;font-size:.85rem}.event-log-item{padding:.25rem 0;color:#8b949e}.event-log-item .timestamp{color:#58a6ff;margin-right:.5rem}.event-log-item .event-type{color:#56d364;margin-right:.5rem}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#0d1117}::-webkit-scrollbar-thumb{background:#30363d;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#484f58}@media(max-width:768px){.app-header{padding:1rem}.app-header h1{font-size:1.5rem;margin-bottom:.25rem}.subtitle{font-size:.875rem;margin-bottom:.75rem}.header-links{flex-wrap:wrap;gap:.5rem}.header-links a{padding:.5rem .75rem;font-size:.85rem}.sidebar-panel{display:none}.demo-panel{width:100%}.demo-content{padding:1rem}.demo-header h2{font-size:1.25rem}.demo-header p{font-size:.875rem}.sidebar,.panel-content{padding:1rem}.panel-header{font-size:1rem}.btn{min-height:44px;padding:.75rem 1rem;font-size:1rem}.demo-nav-item{min-height:44px;padding:.875rem}.button-group{flex-direction:column}.button-group .btn{width:100%}.event-log{height:120px;font-size:.8rem}.app-footer{padding:.75rem 1rem;font-size:.8rem}}@media(min-width:769px)and (max-width:1024px){.app-header h1{font-size:1.75rem}.sidebar-panel{min-width:200px}.demo-content,.panel-content{padding:1.25rem}}@media(hover:none)and (pointer:coarse){.btn,.demo-nav-item,[data-resize-handle=true]{min-height:44px}[data-resize-handle=true][data-direction=horizontal]{min-width:20px}[data-resize-handle=true][data-direction=vertical]{min-height:20px}}