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}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}:root{--background: #ffffff;--foreground: #171717;font-family:Inter,system-ui,Arial,Helvetica,sans-serif}@media (prefers-color-scheme: dark){:root{--background: #0a0a0a;--foreground: #ededed}}body{background:#1a202c;color:#e2e8f0;font-family:Arial,Helvetica,sans-serif;min-height:100vh;margin:0;padding:0}.rulecms-app{text-align:center;min-height:100vh;display:flex;flex-direction:column;background:#1a202c;color:#e2e8f0}.rulecms-header{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);padding:3rem 2rem;color:#fff;position:relative}.implementation-badge{display:inline-block;background:rgba(255,255,255,.2);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.3);border-radius:25px;padding:.5rem 1.5rem;font-size:.9rem;font-weight:600;text-align:center;margin-bottom:1rem;color:#fffffff2;box-shadow:0 4px 6px #0000001a;transition:all .3s ease}.implementation-badge:hover{background:rgba(255,255,255,.25);transform:translateY(-1px);box-shadow:0 6px 8px #00000026}.rulecms-header h1{margin:0;font-size:2.5rem;font-weight:700}.rulecms-description{margin:1rem 0 0;font-size:1.1rem;opacity:.9;max-width:700px;margin-left:auto;margin-right:auto;line-height:1.4}.rulecms-main{flex:1;padding:2rem;max-width:1200px;margin:0 auto}.widget-demo-section{margin-bottom:3rem}.widget-demo-section h2{color:#f7fafc;margin-bottom:1rem}.widget-demo-section a{color:#667eea;text-decoration:none;font-weight:600}.widget-demo-section a:hover{color:#764ba2;text-decoration:underline}.widget-container{background:#2d3748;border:2px dashed #4a5568;border-radius:8px;padding:2rem;margin:2rem 0;min-height:200px;display:flex;align-items:center;justify-content:center;color:#e2e8f0}.code-snippet{background:#4a5568;padding:.2em .4em;border-radius:3px;font-size:.9em;color:#9ae6b4;font-family:Courier New,monospace;border:1px solid #68d391;white-space:nowrap}.rulecms-footer{background:#2d3748;padding:2rem;border-top:1px solid #4a5568;margin-top:auto;color:#e2e8f0}.rulecms-footer a{color:#667eea;text-decoration:none;font-weight:600;transition:color .2s}.rulecms-footer a:hover{color:#764ba2;text-decoration:underline}.heart{color:#e74c3c}.navigation-container{background:#2d3748;border:1px solid #4a5568;border-radius:12px;padding:2rem;margin:2rem 0;box-shadow:0 4px 6px #0000004d}.nav-header{text-align:center;margin-bottom:2rem}.nav-header h3{color:#f7fafc;font-size:1.5rem;font-weight:700;margin:0 0 .5rem}.nav-header p{color:#a0aec0;margin:0}.nav-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}.nav-card{display:block;padding:1.5rem;background:#4a5568;border:2px solid transparent;border-radius:8px;text-decoration:none;transition:all .2s ease;position:relative;overflow:hidden}.nav-card:hover{background:#5a6578;border-color:#667eea;transform:translateY(-2px);box-shadow:0 4px 8px #0003}.nav-card-active{background:#667eea!important;border-color:#764ba2!important;box-shadow:0 4px 12px #667eea4d!important}.nav-card-label{font-size:1.25rem;font-weight:700;color:#f7fafc;margin-bottom:.5rem}.nav-card-title{font-size:1rem;font-weight:600;color:#e2e8f0;margin-bottom:.5rem}.nav-card-description{font-size:.9rem;color:#a0aec0;line-height:1.4}.nav-card-badge{position:absolute;top:.5rem;right:.5rem;background:#48bb78;color:#fff;font-size:.75rem;font-weight:600;padding:.25rem .5rem;border-radius:4px}.collapsible-card{background:#2d3748;border:1px solid #4a5568;border-radius:12px;margin:1.5rem 0;box-shadow:0 4px 6px #0000004d,0 1px 3px #0003;transition:transform .2s,box-shadow .2s;overflow:hidden}.collapsible-card:hover{transform:translateY(-2px);box-shadow:0 6px 8px #0006,0 2px 4px #0000004d}.collapsible-header{padding:1rem 1.5rem;cursor:pointer;transition:background-color .2s;border-bottom:1px solid transparent}.collapsible-header:hover{background:#374151}.collapsible-title-row{display:flex;justify-content:space-between;align-items:center;gap:1rem}.collapsible-title{color:#f7fafc;font-size:1.1rem;margin:0;flex:1}.collapsible-toggle{background:none;border:none;color:#a0aec0;cursor:pointer;padding:.25rem;border-radius:4px;transition:all .2s;display:flex;align-items:center;justify-content:center}.collapsible-toggle:hover{background:#4a5568;color:#e2e8f0}.collapsible-icon{transition:transform .3s ease;width:16px;height:16px}.collapsible-icon.collapsed{transform:rotate(-90deg)}.collapsible-icon.expanded{transform:rotate(0)}.collapsible-content{transition:max-height .3s ease,opacity .3s ease;overflow:hidden}.collapsible-content.collapsed{max-height:0;opacity:0}.collapsible-content.expanded{max-height:500px;opacity:1;border-top:1px solid #4a5568}.collapsible-content-inner{padding:1.5rem;color:#e2e8f0;line-height:1.6}.collapsible-content-inner ul,.collapsible-content-inner ol{display:flex;flex-wrap:wrap;gap:1rem;padding:0;list-style:none;margin:.5rem 0}.collapsible-content-inner li{background:#4a5568;padding:.5rem 1rem;border-radius:6px;border:1px solid #68d391;font-size:.9rem;white-space:nowrap;transition:all .2s}.collapsible-content-inner li:hover{background:#5a6578;transform:translateY(-1px)}.data-list{display:flex;flex-direction:column;gap:.75rem}.data-item{display:flex;justify-content:space-between;align-items:center;background:#4a5568;padding:.75rem 1rem;border-radius:6px;border-left:3px solid #68d391}.data-label{font-weight:600;color:#a0aec0}.data-value{color:#e2e8f0;font-family:Courier New,monospace;font-size:.9rem}@media (max-width: 768px){.rulecms-header{padding:2rem 1rem}.rulecms-header h1{font-size:2rem}.rulecms-main{padding:1rem}.nav-grid{grid-template-columns:1fr}.navigation-container{padding:1rem}.implementation-badge{font-size:.8rem;padding:.4rem 1.2rem;margin-bottom:.8rem}.collapsible-content-inner ul,.collapsible-content-inner ol{flex-direction:column;gap:.75rem}.collapsible-content-inner li{white-space:normal}.data-item{flex-direction:column;align-items:flex-start;gap:.5rem}.data-label{font-size:.85rem}.data-value{font-size:.8rem;word-break:break-all}}