:root{--bg-base: #0f1219;--bg-surface: #161b26;--bg-elevated: rgba(255, 255, 255, .05);--bg-hover: rgba(255, 255, 255, .08);--border: rgba(255, 255, 255, .08);--border-focus: #d4a017;--text-primary: rgba(255, 255, 255, .9);--text-secondary: rgba(255, 255, 255, .55);--text-muted: rgba(255, 255, 255, .3);--accent: #d4a017;--accent-hover: #e2b714;--accent-subtle: rgba(212, 160, 23, .12);--danger: #e74c3c;--success: #2ecc71;--sidebar-width: 220px;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 14px;--transition-page: .3s cubic-bezier(.4, 0, .2, 1);font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,system-ui,sans-serif;line-height:1.5;color:var(--text-primary);-webkit-font-smoothing:antialiased}*{box-sizing:border-box;margin:0;padding:0}body{min-height:100vh;background:var(--bg-base)}.app-layout{display:flex;min-height:100vh}.sidebar{position:sticky;top:0;width:var(--sidebar-width);min-width:var(--sidebar-width);height:100vh;background:var(--bg-surface);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:1.25rem .75rem;z-index:10}.sidebar-logo{display:flex;align-items:center;gap:.6rem;padding:0 .5rem 1.25rem;border-bottom:1px solid var(--border);margin-bottom:.75rem}.sidebar-logo .logo-icon{width:32px;height:32px;background:var(--accent);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:700;color:var(--bg-base)}.sidebar-logo .logo-text{font-size:1.1rem;font-weight:600;color:var(--text-primary)}.sidebar-logo .logo-version{font-size:.65rem;color:var(--text-muted);margin-left:auto;font-weight:400}.sidebar-nav{display:flex;flex-direction:column;gap:6px;flex:1;position:relative}.nav-indicator{position:absolute;left:0;right:0;background:var(--accent-subtle);border-radius:var(--radius-sm);box-shadow:0 0 0 3px var(--accent-subtle);transition:transform .6s cubic-bezier(.16,1,.3,1),height .4s ease;pointer-events:none;z-index:0}.nav-indicator:after{content:"";position:absolute;right:-1px;top:50%;transform:translateY(-50%);width:3px;height:55%;background:var(--accent);border-radius:3px}.nav-item{display:flex;align-items:center;gap:.7rem;padding:.55rem .65rem;border-radius:var(--radius-sm);cursor:pointer;transition:color .2s,background-color .25s,box-shadow .25s;color:var(--text-secondary);font-size:.88rem;-webkit-user-select:none;user-select:none;border:none;background:transparent;width:100%;text-align:left;font-family:inherit;position:relative;z-index:1}.nav-item:hover{color:var(--text-primary);background-color:#ffffff0d;box-shadow:0 0 0 3px #ffffff0d}.nav-item.active{color:var(--accent);font-weight:500}.nav-item.active:hover{background-color:transparent;box-shadow:none}.nav-item .nav-icon{width:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.sidebar-footer{padding-top:.75rem;border-top:1px solid var(--border);margin-top:auto}.sidebar-footer a{display:flex;align-items:center;gap:.6rem;padding:.5rem .65rem;border-radius:var(--radius-sm);color:var(--text-muted);text-decoration:none;font-size:.8rem;transition:all .15s}.sidebar-footer a:hover{color:var(--text-secondary);background:var(--bg-hover)}.main-content{flex:1;min-height:100vh;min-width:0}.page-container{position:relative;max-width:960px;margin:0 auto;padding:2.5rem 2rem}@keyframes cardIn{0%{opacity:0;transform:translateY(28px) scale(.95);filter:blur(4px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}@keyframes cardOut{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-14px) scale(.97)}}.page-enter .motion{animation:cardIn .5s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i, 0) * .07s)}.page-exit .motion{animation:cardOut .18s cubic-bezier(.4,0,1,1) both;animation-delay:calc(var(--i, 0) * 25ms)}.page-header{margin-bottom:2rem}.page-header h1{font-size:1.75rem;font-weight:600;color:var(--text-primary);margin-bottom:.35rem}.page-header h1 .accent{color:var(--accent)}.page-header p{color:var(--text-secondary);font-size:.9rem}.page-header .hero-tagline{font-size:1rem;line-height:1.7;color:var(--text-secondary)}.demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}@media(max-width:900px){.demo-grid{grid-template-columns:1fr}}.demo{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem;display:flex;flex-direction:column;overflow:hidden;min-width:0;transition:border-color .25s,transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s}.demo:hover{border-color:#ffffff1f;transform:translateY(-2px);box-shadow:0 8px 24px #0003}.demo h2{font-size:1rem;margin-bottom:.2rem;color:var(--accent);font-weight:600}.demo .desc{font-size:.78rem;color:var(--text-muted);margin-bottom:1rem}button{border-radius:var(--radius-sm);border:1px solid var(--border);padding:.4em .8em;font-size:.85rem;font-family:inherit;background:var(--bg-hover);color:inherit;cursor:pointer;transition:all .15s}button:hover{background:#ffffff1f;border-color:var(--accent)}button:disabled{opacity:.35;cursor:default}button:disabled:hover{background:var(--bg-hover);border-color:var(--border)}button.primary{background:var(--accent);color:var(--bg-base);border-color:var(--accent);font-weight:600}button.primary:hover{background:var(--accent-hover)}button.danger{border-color:var(--danger);color:var(--danger)}button.danger:hover{background:#e74c3c1f}input,select{border-radius:var(--radius-sm);border:1px solid var(--border);padding:.45em .8em;font-size:.85rem;font-family:inherit;background:#ffffff08;color:inherit;outline:none;width:100%;transition:border-color .15s}input:focus,select:focus{border-color:var(--accent)}select{cursor:pointer}select:disabled{opacity:.4;cursor:default}.row{display:flex;gap:.5rem;align-items:center}.row-between{display:flex;justify-content:space-between;align-items:center}.stack{display:flex;flex-direction:column;gap:.5rem}.badge{font-size:.7rem;padding:.15em .45em;border-radius:4px;background:var(--accent-subtle);color:var(--accent);font-weight:500}.code{background:#00000059!important;border-radius:var(--radius-md);padding:.75rem 1rem;font-family:SF Mono,Fira Code,JetBrains Mono,Cascadia Code,Consolas,monospace!important;font-size:.78rem;white-space:pre;overflow-x:auto;overflow-y:auto;color:#fff9;margin-top:.75rem;max-height:160px;line-height:1.6}.counter-display{font-size:3rem;font-weight:700;text-align:center;padding:.5rem 0;font-variant-numeric:tabular-nums}.todo-list{background:#ffffff08;border-radius:var(--radius-md);overflow:hidden}.todo-item{display:flex;align-items:center;gap:.75rem;padding:.6rem .75rem;border-bottom:1px solid rgba(255,255,255,.04);transition:background .1s}.todo-item:last-child{border-bottom:none}.todo-item:hover{background:#ffffff05}.todo-item.done span{text-decoration:line-through;opacity:.35}.todo-item input[type=checkbox]{width:18px;height:18px;flex-shrink:0;accent-color:var(--accent)}.todo-item span{flex:1;font-size:.88rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.todo-item .delete-btn{flex-shrink:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:none;background:#e74c3c1f;color:var(--danger);font-size:.7rem;padding:0;opacity:0;transition:opacity .15s}.todo-item:hover .delete-btn{opacity:1}.form-group{display:flex;flex-direction:column;gap:.25rem}.form-group label{font-size:.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;font-weight:500}.history-bar{display:flex;gap:3px;margin-top:.5rem}.history-dot{width:8px;height:8px;border-radius:50%;background:#d4a01740;cursor:pointer;transition:all .15s}.history-dot:hover{background:#d4a01780}.history-dot.active{background:var(--accent)}.table-wrap{overflow-x:auto;border-radius:var(--radius-md);background:#ffffff08;margin-bottom:.75rem}table{width:100%;border-collapse:collapse;font-size:.85rem}thead th{text-align:left;padding:.6rem .75rem;font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);border-bottom:1px solid var(--border);font-weight:500}tbody td{padding:.55rem .75rem;border-bottom:1px solid rgba(255,255,255,.03)}tbody tr{cursor:pointer;transition:background .1s}tbody tr:hover{background:#ffffff08}tbody tr:last-child td{border-bottom:none}tbody tr.row-selected{background:var(--accent-subtle)}tbody tr.row-selected:hover{background:#d4a01729}table input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent)}.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:.4rem}.doc-section{margin-bottom:2.5rem}.doc-section h2{font-size:1.15rem;font-weight:600;color:var(--text-primary);margin-bottom:.75rem}.doc-section h3{font-size:.95rem;font-weight:500;color:var(--text-secondary);margin:1.25rem 0 .5rem}.doc-section p{color:var(--text-secondary);font-size:.88rem;line-height:1.7;margin-bottom:.75rem}.doc-section .code{max-height:none;margin-bottom:.75rem}.doc-section code{font-family:SF Mono,Fira Code,JetBrains Mono,Cascadia Code,Consolas,monospace;font-size:.82em;background:#d4a0171a;color:var(--accent);padding:.15em .4em;border-radius:3px}.api-table{margin:.75rem 0}.api-table table{font-size:.82rem}.api-table td code{white-space:nowrap}.install-block{display:flex;align-items:center;gap:.75rem;background:#00000059;border-radius:var(--radius-md);padding:.85rem 1.25rem;font-family:SF Mono,Fira Code,JetBrains Mono,Cascadia Code,Consolas,monospace;font-size:.88rem;color:var(--accent);margin-bottom:.75rem;border:1px solid var(--border)}.install-block .prompt{color:var(--text-muted);-webkit-user-select:none;user-select:none}.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:.75rem}.feature-card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-md);padding:1rem;transition:border-color .25s,transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s}.feature-card:hover{border-color:#ffffff1f;transform:translateY(-2px);box-shadow:0 6px 20px #00000026}.feature-card .feature-title{font-size:.85rem;font-weight:600;color:var(--accent);margin-bottom:.25rem}.feature-card .feature-desc{font-size:.78rem;color:var(--text-muted);line-height:1.5}.side-modal-backdrop{position:fixed;inset:0;background:#00000080;opacity:0;transition:opacity .4s;pointer-events:none;z-index:50}.side-modal-backdrop.open{opacity:1;pointer-events:auto}.side-modal-body{position:absolute;inset:0;overflow:auto;transition:transform .4s cubic-bezier(.16,1,.3,1),border-radius .4s,box-shadow .4s;z-index:40;background:var(--bg-base)}.side-modal-body.open{overflow:hidden;transform:translate(-3%) scale(.92);border-radius:18px;box-shadow:0 0 50px 5px #0003}.side-modal-panel{position:fixed;right:0;top:0;bottom:0;width:fit-content;max-width:520px;transform:translate(100%);transition:transform .4s cubic-bezier(.16,1,.3,1);padding:10px;z-index:60}.side-modal-panel.open{transform:translate(0)}.side-modal-inner{position:relative;height:100%;min-width:380px;background:var(--bg-surface);border-radius:18px;overflow-y:auto;box-shadow:0 0 50px 5px #0000004d}.side-modal-close{position:sticky;top:.75rem;float:right;margin:.75rem .75rem 0 0;width:32px;height:32px;border-radius:50%;border:1px solid var(--border);background:var(--bg-elevated);color:var(--text-secondary);font-size:.85rem;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:1;padding:0;transition:all .15s}.side-modal-close:hover{background:var(--bg-hover);color:var(--text-primary);border-color:var(--accent)}.side-modal-content{padding:1.5rem}.demo-expand-wrap{margin-top:auto;padding-top:15px}.demo-expand-link{display:inline-flex;align-items:center;gap:.35rem;border:none;background:transparent;color:var(--text-muted);font-size:.75rem;font-family:inherit;cursor:pointer;transition:color .25s,background-color .25s,box-shadow .25s;padding:.3rem .6rem;border-radius:var(--radius-sm)}.demo:hover .demo-expand-link{color:var(--bg-base);background:var(--accent);box-shadow:0 0 0 3px var(--accent)}.demo-detail h2{font-size:1.25rem;font-weight:600;color:var(--accent);margin-bottom:.5rem}.demo-detail .detail-desc{font-size:.88rem;color:var(--text-secondary);line-height:1.7;margin-bottom:1.25rem}.demo-detail .detail-highlights{margin-bottom:1.5rem}.demo-detail .detail-highlights h3,.demo-detail .detail-code h3{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);font-weight:500;margin-bottom:.5rem}.demo-detail .detail-highlights ul{list-style:none;padding:0}.demo-detail .detail-highlights li{font-size:.85rem;color:var(--text-secondary);padding:.35rem 0 .35rem 1.2rem;position:relative;line-height:1.5}.demo-detail .detail-highlights li:before{content:"→";position:absolute;left:0;color:var(--accent)}.demo-detail .detail-code .code{max-height:none}.mobile-nav{display:none}@media(max-width:900px){.app-layout{flex-direction:column}.sidebar{display:none}.main-content{padding-bottom:0}.page-container{padding:1.5rem .75rem;overflow-x:hidden}.page-header h1{font-size:1.4rem}.demo-grid{grid-template-columns:1fr}.demo-grid .demo{grid-column:auto!important}.feature-grid{grid-template-columns:1fr}.counter-display{font-size:2.2rem}.code{font-size:.72rem;max-height:120px}.api-table{overflow-x:auto}.api-table table{min-width:400px}.side-modal-panel{max-width:calc(100vw - 40px)}.side-modal-inner{min-width:0}.mobile-nav{display:flex;position:sticky;bottom:0;height:3.5rem;border-top:1px solid var(--border);z-index:20;align-items:center;justify-content:space-around;padding:0 .5rem;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#161b26e6}.mobile-nav button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:.35rem .75rem;border:none;background:transparent;color:var(--text-muted);font-size:.65rem;font-family:inherit;cursor:pointer;transition:color .15s}.mobile-nav button.active{color:var(--accent)}.mobile-nav button svg{width:20px;height:20px}}