:root{--primary-color:#06c;--primary-hover:#0056b3;--secondary-color:#6c757d;--success-color:#28a745;--warning-color:#ffc107;--danger-color:#dc3545;--info-color:#17a2b8;--bg-primary:#fff;--bg-secondary:#f8f9fa;--bg-tertiary:#e9ecef;--text-primary:#212529;--text-secondary:#6c757d;--text-muted:#868e96;--border-color:#dee2e6;--border-radius:8px;--box-shadow:0 2px 10px #0000001a;--transition:all .3s ease;--sidebar-width:280px;--header-height:70px;--footer-height:50px}.dark-mode{--bg-primary:#1a1a1a;--bg-secondary:#2d2d2d;--bg-tertiary:#404040;--text-primary:#fff;--text-secondary:#b0b0b0;--text-muted:#888;--border-color:#404040;--box-shadow:0 2px 10px #0000004d}*{box-sizing:border-box}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--bg-primary);color:var(--text-primary);transition:var(--transition);margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.app{background-color:var(--bg-primary);min-height:100vh;transition:var(--transition)}.main-content{flex-direction:column;min-height:100vh;display:flex}.app-header{height:var(--header-height);background-color:var(--bg-secondary);border-bottom:1px solid var(--border-color);z-index:100;transition:var(--transition);justify-content:space-between;align-items:center;padding:0 2rem;display:flex;position:sticky;top:0}.app-header h1{color:var(--text-primary);margin:0;font-size:1.5rem;font-weight:600}.theme-toggle button{border:1px solid var(--border-color);border-radius:var(--border-radius);cursor:pointer;transition:var(--transition);background:0 0;background-color:var(--bg-primary);padding:.5rem;font-size:1.2rem}.theme-toggle button:hover{background-color:var(--bg-tertiary);transform:scale(1.05)}.demo-container{min-height:calc(100vh - var(--header-height) - var(--footer-height));flex:1;display:flex}.demo-nav{width:var(--sidebar-width);background-color:var(--bg-secondary);border-right:1px solid var(--border-color);transition:var(--transition);padding:1.5rem 1rem}.demo-nav h3{color:var(--text-primary);border-bottom:1px solid var(--border-color);margin:0 0 1rem;padding-bottom:.5rem;font-size:1.1rem;font-weight:600}.nav-item{border-radius:var(--border-radius);cursor:pointer;width:100%;transition:var(--transition);color:var(--text-secondary);text-align:left;background:0 0;border:1px solid #0000;align-items:center;gap:.75rem;margin-bottom:.5rem;padding:.75rem;font-size:.9rem;display:flex}.nav-item:hover{background-color:var(--bg-tertiary);color:var(--text-primary);transform:translate(2px)}.nav-item.active{background-color:var(--primary-color);color:#fff;border-color:var(--primary-hover)}.nav-item .icon{flex-shrink:0;font-size:1.2rem}.nav-item .name{font-weight:500}.demo-main{background-color:var(--bg-primary);flex:1;padding:2rem;overflow-y:auto}.demo-content{max-width:800px;margin:0 auto}.demo-content h2{color:var(--text-primary);margin:0 0 1rem;font-size:2rem;font-weight:700}.demo-content p{color:var(--text-secondary);margin-bottom:1.5rem;font-size:1.1rem;line-height:1.6}.demo-content ul{margin-bottom:2rem;padding-left:1.5rem}.demo-content li{color:var(--text-secondary);margin-bottom:.5rem;line-height:1.5}.todo-list{background-color:var(--bg-secondary);border-radius:var(--border-radius);border:1px solid var(--border-color);margin-top:2rem;padding:1.5rem}.todo-list h3{color:var(--text-primary);margin:0 0 1rem;font-size:1.3rem}.todo-item{background-color:var(--bg-primary);border-radius:var(--border-radius);border:1px solid var(--border-color);transition:var(--transition);justify-content:space-between;align-items:center;margin-bottom:.5rem;padding:.75rem;display:flex}.todo-item:hover{box-shadow:var(--box-shadow);transform:translateY(-1px)}.todo-item.completed{opacity:.6;text-decoration:line-through}.todo-item span{color:var(--text-primary);flex:1;font-weight:500}.todo-item button{cursor:pointer;transition:var(--transition);background:0 0;border:none;padding:.25rem;font-size:1.2rem}.todo-item button:hover{transform:scale(1.2)}.notes-textarea{border:1px solid var(--border-color);border-radius:var(--border-radius);background-color:var(--bg-secondary);width:100%;min-height:200px;color:var(--text-primary);resize:vertical;transition:var(--transition);padding:1rem;font-family:inherit;font-size:1rem;line-height:1.5}.notes-textarea:focus{border-color:var(--primary-color);outline:none;box-shadow:0 0 0 3px #0066cc1a}.notes-actions{background-color:var(--bg-secondary);border-radius:var(--border-radius);border:1px solid var(--border-color);margin-top:1.5rem;padding:1rem}.notes-actions p{color:var(--text-primary);margin-bottom:.5rem;font-weight:600}.notes-actions ul{margin:0;padding-left:1.5rem}.notes-actions li{color:var(--text-muted);margin-bottom:.25rem;font-style:italic}.demo-button{background-color:var(--primary-color);color:#fff;border-radius:var(--border-radius);cursor:pointer;transition:var(--transition);border:none;margin-bottom:2rem;padding:.75rem 1.5rem;font-size:1rem;font-weight:500}.demo-button:hover{background-color:var(--primary-hover);box-shadow:var(--box-shadow);transform:translateY(-2px)}.user-info{background-color:var(--bg-secondary);border-radius:var(--border-radius);border:1px solid var(--border-color);margin-top:1rem;padding:1.5rem}.user-info h3{color:var(--text-primary);margin:0 0 1rem;font-size:1.2rem}.user-info p{color:var(--text-secondary);margin:.5rem 0}.user-info strong{color:var(--text-primary)}.actions-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;margin:2rem 0;display:grid}.action-card{background-color:var(--bg-secondary);border-radius:var(--border-radius);border:1px solid var(--border-color);transition:var(--transition);padding:1.5rem}.action-card:hover{box-shadow:var(--box-shadow);transform:translateY(-2px)}.action-card h4{color:var(--text-primary);margin:0 0 1rem;font-size:1.1rem}.action-card ul{margin:0;padding-left:1.5rem}.action-card li{color:var(--text-secondary);margin-bottom:.5rem}.state-overview{grid-template-columns:1fr 1fr;gap:2rem;margin:2rem 0;display:grid}.state-section{background-color:var(--bg-secondary);border-radius:var(--border-radius);border:1px solid var(--border-color);padding:1.5rem}.state-section h4{color:var(--text-primary);margin:0 0 1rem;font-size:1.2rem}.state-section pre{background-color:var(--bg-tertiary);border-radius:var(--border-radius);color:var(--text-primary);border:1px solid var(--border-color);padding:1rem;font-size:.9rem;overflow-x:auto}.state-section ul{margin:0;padding-left:1.5rem}.state-section li{color:var(--text-secondary);margin-bottom:.5rem}.app-footer{height:var(--footer-height);background-color:var(--bg-secondary);border-top:1px solid var(--border-color);justify-content:center;align-items:center;margin-top:auto;padding:0 2rem;display:flex}.app-footer p{color:var(--text-muted);text-align:center;margin:0;font-size:.9rem}.app-footer kbd{background-color:var(--bg-tertiary);border:1px solid var(--border-color);color:var(--text-primary);border-radius:4px;margin:0 .2rem;padding:.2rem .4rem;font-size:.8rem}.app-footer strong{color:var(--text-primary)}@media (max-width:1024px){.demo-container{flex-direction:column}.demo-nav{border-right:none;border-bottom:1px solid var(--border-color);width:100%}.state-overview,.actions-grid{grid-template-columns:1fr}}@media (max-width:768px){.app-header{padding:0 1rem}.app-header h1{font-size:1.2rem}.demo-main{padding:1rem}.demo-content h2{font-size:1.5rem}:root{--sidebar-width:100%;--header-height:60px}}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.demo-content{animation:.3s ease-out fadeIn}.nav-item:focus,.demo-button:focus,.theme-toggle button:focus{outline:2px solid var(--primary-color);outline-offset:2px}.loading{opacity:.6;pointer-events:none}.success{border-color:var(--success-color);background-color:#28a7451a}.error{border-color:var(--danger-color);background-color:#dc35451a}.feature-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;margin:2rem 0;display:grid}.feature-card{background-color:var(--bg-secondary);border-radius:var(--border-radius);border:1px solid var(--border-color);transition:var(--transition);text-align:center;padding:1.5rem}.feature-card:hover{box-shadow:var(--box-shadow);transform:translateY(-4px)}.feature-icon{margin-bottom:1rem;font-size:2.5rem}.feature-card h3{color:var(--text-primary);margin:0 0 1rem;font-size:1.2rem;font-weight:600}.feature-card p{color:var(--text-secondary);margin-bottom:1rem;font-size:.95rem;line-height:1.5}.feature-card ul{text-align:left;margin:0;padding-left:1rem}.feature-card li{color:var(--text-muted);margin-bottom:.25rem;font-size:.9rem}.getting-started-actions{background-color:var(--bg-secondary);border-radius:var(--border-radius);border:1px solid var(--border-color);margin:3rem 0;padding:2rem}.getting-started-actions h3{color:var(--text-primary);text-align:center;margin:0 0 1.5rem;font-size:1.4rem}.quick-actions{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;display:grid}.quick-action{background-color:var(--bg-primary);border-radius:var(--border-radius);border:1px solid var(--border-color);transition:var(--transition);padding:1.25rem}.quick-action:hover{background-color:var(--bg-tertiary)}.quick-action strong{color:var(--text-primary);margin-bottom:.5rem;font-size:1rem;display:block}.quick-action p{color:var(--text-secondary);margin:0;font-size:.9rem;line-height:1.4}.quick-action kbd{background-color:var(--bg-tertiary);border:1px solid var(--border-color);color:var(--text-primary);border-radius:4px;margin:0 .1rem;padding:.2rem .4rem;font-size:.8rem}.demo-stats{background:linear-gradient(135deg,var(--bg-secondary)0%,var(--bg-tertiary)100%);border-radius:var(--border-radius);border:1px solid var(--border-color);margin:3rem 0;padding:2rem}.demo-stats h3{color:var(--text-primary);text-align:center;margin:0 0 1.5rem;font-size:1.4rem}.stats-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1.5rem;display:grid}.stat-item{background-color:var(--bg-primary);border-radius:var(--border-radius);text-align:center;border:1px solid var(--border-color);transition:var(--transition);padding:1.5rem 1rem}.stat-item:hover{box-shadow:var(--box-shadow);transform:scale(1.05)}.stat-number{color:var(--primary-color);margin-bottom:.5rem;font-size:1.8rem;font-weight:700;display:block}.stat-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;font-size:.85rem;font-weight:500;display:block}@media (max-width:768px){.feature-grid,.quick-actions{grid-template-columns:1fr}.stats-grid{grid-template-columns:repeat(2,1fr)}.feature-card{padding:1rem}.getting-started-actions{padding:1.5rem}}