*{box-sizing:border-box}body{color:#111827;background:#f5f7fb;margin:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}.demo-app{min-height:100vh}.demo-header{z-index:100;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#ffffffd9;border-bottom:1px solid #e5e7eb;justify-content:space-between;align-items:center;height:72px;padding:0 32px;display:flex;position:sticky;top:0}.demo-left{align-items:center;gap:14px;display:flex}.demo-left h2{margin:0;font-size:22px;font-weight:700}.demo-right{align-items:center;gap:10px;display:flex}.demo-divider{background:#e5e7eb;width:1px;height:28px}.demo-button{color:#374151;cursor:pointer;background:#fff;border:1px solid #e5e7eb;border-radius:10px;height:38px;padding:0 15px;font-size:14px;font-weight:500;transition:all .18s}.demo-button:hover{border-color:#d1d5db;transform:translateY(-1px);box-shadow:0 6px 16px #0000000d}.demo-button:active{transform:scale(.97)}.demo-button.active{color:#fff;background:#111827;border-color:#111827}.demo-button:disabled{opacity:.35;cursor:not-allowed;box-shadow:none;transform:none}.help-btn{color:#fff;cursor:pointer;background:#111827;border:none;border-radius:999px;width:42px;height:42px;font-size:18px;font-weight:700;transition:all .18s}.help-btn:hover{transform:scale(1.07);box-shadow:0 10px 25px #00000040}.demo-nav{gap:12px;padding:22px 32px;display:flex}.demo-nav button{all:unset;cursor:pointer;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:10px 18px;font-size:14px;font-weight:500;transition:all .18s}.demo-nav button:hover{transform:translateY(-1px);box-shadow:0 6px 18px #0000000d}.demo-page{max-width:1200px;margin:auto;padding:10px 32px 60px}.demo-page h1{letter-spacing:-.03em;margin-top:20px;font-size:48px;font-weight:800}.demo-page p{color:#6b7280;max-width:720px;font-size:18px;line-height:1.8}.demo-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-top:40px;display:grid}.demo-card{background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:24px;transition:all .2s}.demo-card:hover{transform:translateY(-3px);box-shadow:0 16px 40px #0000000f}.demo-card h3{margin-top:0;margin-bottom:10px;font-size:18px}.demo-card p{color:#6b7280;margin:0;font-size:14px;line-height:1.7}.demo-panel{background:#fff;border:1px solid #e5e7eb;border-radius:18px;margin-top:40px;padding:24px}.demo-panel h3{margin-top:0}.demo-settings{flex-wrap:wrap;gap:12px;margin-top:18px;display:flex}.demo-footer{text-align:center;color:#9ca3af;margin-top:60px;padding-bottom:50px;font-size:14px}@media (width<=900px){.demo-header{flex-direction:column;justify-content:center;gap:14px;height:auto;padding:20px}.demo-right{flex-wrap:wrap;justify-content:center}.demo-nav{overflow:auto}.demo-page h1{font-size:36px}}.tiply{--bg:#f8fafc;--surface:#fff;--surface-elevated:#fff;--surface-subtle:#f1f5f9;--text:#0f172a;--text-secondary:#64748b;--text-muted:#94a3b8;--border:#e2e8f0;--border-hover:#cbd5f5;--overlay:#0f172a8c;--shadow-sm:0 1px 2px #0000000d;--shadow:0 10px 30px #0000001f;--shadow-lg:0 25px 60px #0000002e;--primary:#2563eb;--primary-hover:#1d4ed8;--primary-soft:#2563eb1f;--btn-bg:#fff;--btn-hover:#f1f5f9;--success:#22c55e;--warning:#f59e0b;--danger:#ef4444;--highlight:#fde047;--highlight-active:#f59e0b}.tiply-dark{--bg:#0b1220;--surface:#0f172a;--surface-elevated:#111827;--surface-subtle:#1e293b;--text:#f8fafc;--text-secondary:#cbd5e1;--text-muted:#94a3b8;--border:#1f2937;--border-hover:#334155;--overlay:#000000b3;--shadow-sm:0 1px 2px #0006;--shadow:0 15px 40px #0000008c;--shadow-lg:0 30px 80px #000000a6;--primary:#4f8cff;--primary-hover:#3b82f6;--primary-soft:#4f8cff26;--btn-bg:#111827;--btn-hover:#1f2937;--success:#22c55e;--warning:#fbbf24;--danger:#f87171;--highlight:#fde047;--highlight-active:#f59e0b}.tiply-modal-overlay{background:var(--overlay);z-index:2147483000;opacity:0;justify-content:center;align-items:center;transition:opacity .2s;display:flex;position:fixed;inset:0}.tiply-modal-overlay.show{opacity:1}.tiply-modal-overlay.hide{opacity:0}.tiply-modal{background:var(--surface);width:600px;max-width:90vw;max-height:85vh;box-shadow:var(--shadow);opacity:0;color:var(--text);border-radius:16px;flex-direction:column;transition:all .2s;display:flex;position:relative;overflow:hidden;transform:scale(.95)}.tiply-modal.show{opacity:1;transform:scale(1)}.tiply-modal.hide{opacity:0;transform:scale(.95)}.tiply-header{color:var(--text);flex-direction:column;flex-shrink:0;gap:8px;padding:24px 24px 0;display:flex}.tiply-search{border:1px solid var(--border);background:var(--surface);width:100%}.tiply-search:focus-within{border-color:var(--primary)}.tiply-title{margin:0;font-size:28px}.tiply-close{cursor:pointer;color:var(--text-secondary);background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;padding:6px;font-size:20px;line-height:1;transition:all .15s;display:flex}.tiply-close:hover{background:var(--surface-subtle);color:var(--text)}.tiply-close:active{background:var(--border);transform:scale(.92)}.tiply-close:disabled{opacity:.4;cursor:not-allowed}.tiply-body{min-height:0;color:var(--text);flex:1;padding:24px;line-height:1.8;overflow-y:auto}.tiply-drawer-overlay{background:var(--overlay);opacity:0;z-index:2147483000;transition:opacity .25s;position:fixed;inset:0}.tiply-drawer-overlay.show{opacity:1}.tiply-drawer-overlay.hide{opacity:0}.tiply-drawer{background:var(--surface);color:var(--text);z-index:10000;will-change:transform;box-sizing:border-box;flex-direction:column;transition:transform .25s;display:flex;position:fixed;overflow:hidden;box-shadow:-10px 0 30px #00000026}.tiply-drawer.show{transform:translate(0)}.tiply-drawer-title{margin:0;font-size:24px}.tiply-drawer-close{cursor:pointer;background:0 0;border:none;font-size:24px}.tiply-drawer-right{width:420px;height:100vh;top:0;right:0;transform:translate(100%)}.tiply-drawer-right.show{transform:translate(0)}.tiply-drawer-right.hide{transform:translate(100%)}.tiply-drawer-left{width:420px;height:100vh;top:0;left:0;transform:translate(-100%)}.tiply-drawer-left.show{transform:translate(0)}.tiply-drawer-left.hide{transform:translate(-100%)}.tiply-drawer-bottom{border-radius:20px 20px 0 0;width:100%;height:70vh;bottom:0;left:0;transform:translateY(100%)}.tiply-drawer-bottom.show{transform:translateY(0)}.tiply-drawer-bottom.hide{transform:translateY(100%)}.tiply-help-header{z-index:10;background:var(--surface-soft);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border);width:100%;color:var(--text);justify-content:space-between;align-items:center;display:flex;top:0}.tiply-help-title{color:var(--text);text-align:center;flex:1;font-size:14px;font-weight:600}.tiply-nav-btn{cursor:pointer;width:36px;height:36px;color:var(--text-secondary);background:0 0;border:none;border-radius:10px;justify-content:center;align-items:center;transition:all .15s;display:flex}.tiply-nav-btn:hover{background:var(--surface-subtle);color:var(--text)}.tiply-nav-btn:active{transform:scale(.92)}.tiply-nav-btn:disabled{opacity:.4;cursor:not-allowed}.tiply-tooltip-wrapper{display:inline-flex;position:relative}.tiply-tooltip{background:var(--surface-elevated);color:var(--text);border:1px solid var(--border);box-shadow:var(--shadow);opacity:0;pointer-events:none;white-space:nowrap;z-index:1000;border-radius:8px;padding:6px 10px;font-size:11px;transition:all .15s;position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%)translateY(4px)}.tiply-tooltip-wrapper:hover .tiply-tooltip{opacity:1;transform:translate(-50%)translateY(0)}.tiply-close-button-div{flex-shrink:0;justify-content:flex-end;padding:24px 24px 0;display:flex}.tiply-search{background:var(--surface-subtle);border:1px solid var(--border);color:var(--text-secondary);border-radius:10px;align-items:center;gap:8px;padding:8px 10px;transition:all .15s;display:flex}.tiply-search:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);color:var(--text)}.tiply-search-icon{color:var(--text-secondary);flex-shrink:0;justify-content:center;align-items:center;display:flex}.tiply-search-input{min-width:0;color:var(--text);caret-color:var(--primary);background:0 0;border:none;outline:none;flex:1;font-size:14px}.tiply-search-input::placeholder{color:var(--text-muted);opacity:1}.tiply-search-clear{cursor:pointer;color:var(--text-secondary);background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;padding:4px;transition:all .15s;display:flex}.tiply-search-clear:hover{background:var(--surface);color:var(--text)}.tiply-search-meta{color:var(--text-muted);justify-content:space-between;align-items:center;margin-top:6px;font-size:12px;display:flex}.tiply-search-controls button{border:1px solid var(--border);background:var(--surface);cursor:pointer;color:var(--text);border-radius:6px;margin-left:6px;padding:4px 8px;transition:all .15s}.tiply-search-controls button:hover{background:var(--surface-subtle)}.tiply-search-navigation{flex-direction:column;align-items:center;gap:8px;margin-top:10px;margin-bottom:8px;display:flex}.tiply-search-buttons{gap:10px;display:flex}.tiply-search-button{appearance:none;border:1px solid var(--border);background:var(--btn-bg);color:var(--text);cursor:pointer;border-radius:10px;flex-direction:row;justify-content:space-between;align-items:center;padding:8px 14px;font-size:13px;font-weight:500;transition:background .18s,border-color .18s,transform .18s,box-shadow .18s;display:flex}.tiply-search-button:hover{background:var(--btn-hover);transform:translateY(-1px);box-shadow:0 2px 8px #0000000f}.tiply-search-button:active{transform:scale(.97)}.tiply-search-button:focus-visible{border-color:#2563eb;outline:none;box-shadow:0 0 0 3px #2563eb2e}.tiply-search-result{color:#666;-webkit-user-select:none;user-select:none;font-size:13px;font-weight:600}.tiply-help-button{border:1px solid var(--border);background:var(--btn-bg);width:40px;height:40px;color:var(--text);cursor:pointer;border-radius:999px;justify-content:center;align-items:center;transition:background .18s,color .18s,border-color .18s,transform .18s,box-shadow .18s;display:inline-flex}.tiply-help-button:hover{background:var(--help-hover-bg);color:var(--help-hover-fg);transform:translateY(-1px);box-shadow:0 8px 20px #1118272e}.tiply-help-button:active{transform:scale(.96)}.tiply-help-button:focus-visible{outline:none;box-shadow:0 0 0 3px #3b82f62e,0 8px 20px #1118271f}.tiply-help-button svg{flex-shrink:0;width:18px;height:18px}.tiply-highlight{background:var(--highlight)}.tiply-highlight-active{background:var(--highlight-active)}@media (width<=768px){.tiply-modal{width:80%;max-width:none}}