.layout{display:flex;height:100vh}.sidebar{width:200px;flex-shrink:0;background:#1e293b;display:flex;flex-direction:column;border-right:1px solid #334155}.sidebar-header{padding:1.25rem 1rem;border-bottom:1px solid #334155}.sidebar-title{font-size:.8rem;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.05em;line-height:1.4}.sidebar ul{list-style:none;padding:.5rem 0;flex:1}.sidebar ul li a{display:block;padding:.6rem 1rem;color:#cbd5e1;text-decoration:none;font-size:.9rem;border-left:3px solid transparent;transition:background .15s,color .15s}.sidebar ul li a:hover{background:#334155;color:#f1f5f9}.sidebar ul li a.active{border-left-color:#38bdf8;color:#38bdf8;background:#0f172a}.sidebar-footer{padding:1rem;border-top:1px solid #334155;font-size:.8rem}.sidebar-footer a{color:#64748b;text-decoration:none}.sidebar-footer a:hover{color:#94a3b8}.content{flex:1;min-width:0;overflow:auto;padding:2rem}.page{max-width:900px}.page h1{font-size:1.75rem;font-weight:700;color:#f1f5f9;margin-bottom:.75rem}.page h2{font-size:1.1rem;font-weight:600;color:#94a3b8;margin:1.75rem 0 .6rem;text-transform:uppercase;letter-spacing:.05em}.description{color:#94a3b8;line-height:1.6;margin-bottom:1.5rem;max-width:70ch}.component-list{list-style:none;padding:0;margin:1.5rem 0}.component-list li{margin-bottom:.75rem}.component-list a{display:inline-block;color:#7dd3fc;text-decoration:none;font-size:1rem;font-weight:600}.component-list a:hover{text-decoration:underline}.component-list .summary{display:block;color:#94a3b8;font-size:.9rem;font-weight:400;margin-top:.15rem}.demo-controls{display:flex;gap:1rem;margin-bottom:.75rem}.toggle{display:flex;align-items:center;gap:.4rem;cursor:pointer;color:#94a3b8;font-size:.9rem;font-family:monospace;-webkit-user-select:none;user-select:none}.toggle input{accent-color:#38bdf8;width:14px;height:14px;cursor:pointer}.demo-container{border-radius:12px;overflow:hidden;margin-bottom:.5rem}.attribution{font-size:.75rem;color:#475569;margin-bottom:1.5rem}.attribution a{color:#64748b;text-decoration:underline}.code{background:#1e293b;border:1px solid #334155;border-radius:8px;padding:1rem 1.25rem;overflow-x:auto;font-size:.85rem;line-height:1.6;color:#7dd3fc}.page table{width:100%;border-collapse:collapse;font-size:.9rem;margin-bottom:1rem}.page th{text-align:left;padding:.5rem .75rem;border-bottom:1px solid #334155;color:#64748b;font-weight:600}.page td{padding:.5rem .75rem;border-bottom:1px solid #1e293b;color:#cbd5e1}.page code{font-family:monospace;background:#1e293b;padding:.1em .35em;border-radius:3px;font-size:.88em;color:#7dd3fc}