*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:Avenir Next,Avenir,system-ui,-apple-system,sans-serif;background:#f5f5f5;color:#333;min-height:100vh;overflow:hidden}.canvas{width:100vw;height:100vh;display:flex;flex-direction:column;position:relative}.canvas-viz{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.canvas-empty{text-align:center;color:#bbb}.canvas-empty h1{font-size:2rem;font-weight:600;color:#ccc;margin-bottom:.5rem}.canvas-empty p{font-size:.9rem}.canvas-loading{display:flex;align-items:center;gap:.75rem;color:#999;font-size:.9rem}.canvas-error{color:#e15759;font-size:.9rem;padding:2rem;text-align:center}.bottom-bar{position:fixed;bottom:0;left:0;right:0;display:flex;flex-direction:column;align-items:center;padding:.5rem 1.5rem 1.25rem;pointer-events:none;z-index:10}.bottom-bar>*{pointer-events:auto}.bottom-sources{display:flex;gap:.3rem;margin-bottom:.5rem;flex-wrap:wrap;justify-content:center}.source-pill{padding:.2rem .6rem;border:1px solid rgba(0,0,0,.1);border-radius:100px;background:#ffffffd9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:.7rem;font-family:inherit;color:#999;cursor:pointer;transition:all .15s}.source-pill:hover:not(:disabled){color:#555;border-color:#0003;background:#fffffff2}.source-pill-active{color:#4e79a7;border-color:#4e79a7;background:#f0f5faf2}.source-pill:disabled{opacity:.5;cursor:not-allowed}.bottom-input{display:flex;gap:0;width:100%;max-width:640px;background:#ffffffe6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(0,0,0,.1);border-radius:12px;overflow:hidden;box-shadow:0 4px 24px #00000014;transition:border-color .15s,box-shadow .15s}.bottom-input:focus-within{border-color:#4e79a7;box-shadow:0 4px 24px #4e79a71f}.bottom-input input{flex:1;padding:.75rem 1rem;border:none;background:transparent;font-size:.9rem;font-family:inherit;color:#333;outline:none}.bottom-input input::placeholder{color:#bbb}.bottom-btn{padding:.75rem 1.25rem;border:none;background:transparent;font-size:.85rem;font-weight:600;font-family:inherit;color:#4e79a7;cursor:pointer;transition:background .15s;white-space:nowrap}.bottom-btn:hover{background:#4e79a70f}.bottom-btn:disabled{color:#ccc;cursor:not-allowed}.bottom-btn-stop{color:#e15759}.bottom-btn-stop:hover{background:#e157590f}.bottom-hint{margin-top:.35rem;font-size:.7rem;color:#bbb;display:flex;align-items:center;gap:.4rem}.hint-muted{color:#ccc}.viz-canvas{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center}.viz-img{max-width:100%;max-height:100%;object-fit:contain;border-radius:0}.viz-code-frame{width:100%;height:100%;border:none}.viz-loading{display:flex;align-items:center;gap:.75rem;color:#999;font-size:.9rem}.viz-error{color:#e15759;font-size:.85rem;padding:2rem}.viz-float-tabs{position:absolute;top:1rem;right:1rem;display:flex;gap:0;z-index:5;background:#ffffffd9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:8px;border:1px solid rgba(0,0,0,.08);overflow:hidden;box-shadow:0 2px 8px #0000000f}.viz-ftab{padding:.3rem .75rem;border:none;background:transparent;font-size:.75rem;font-family:inherit;color:#999;cursor:pointer;transition:color .15s,background .15s}.viz-ftab:not(:last-child){border-right:1px solid rgba(0,0,0,.06)}.viz-ftab:hover:not(:disabled){color:#555;background:#00000008}.viz-ftab-active{color:#4e79a7;background:#4e79a714}.viz-ftab:disabled{opacity:.5;cursor:not-allowed}.viz-float-input{position:absolute;bottom:5.5rem;left:50%;transform:translate(-50%);display:flex;gap:0;width:90%;max-width:480px;background:#ffffffd9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(0,0,0,.08);border-radius:8px;overflow:hidden;box-shadow:0 2px 8px #0000000f;z-index:5}.viz-float-input input{flex:1;padding:.5rem .75rem;border:none;background:transparent;font-size:.8rem;font-family:inherit;color:#555;outline:none}.viz-float-input input::placeholder{color:#ccc}.viz-float-input button{padding:.5rem .75rem;border:none;background:transparent;font-size:.8rem;font-weight:600;font-family:inherit;color:#4e79a7;cursor:pointer;transition:background .15s;white-space:nowrap}.viz-float-input button:hover:not(:disabled){background:#4e79a70f}.viz-float-input button:disabled{color:#ccc;cursor:not-allowed}.trace-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:100;display:flex;align-items:center;justify-content:center;padding:2rem}.trace-panel{background:#fff;border-radius:12px;box-shadow:0 16px 48px #0003;width:100%;max-width:900px;max-height:80vh;display:flex;flex-direction:column;overflow:hidden}.trace-panel-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid #eee;font-size:.85rem;font-weight:600;color:#555}.trace-close{padding:.25rem .6rem;border:1px solid #ddd;border-radius:4px;background:transparent;font-size:.7rem;font-family:inherit;color:#999;cursor:pointer}.trace-close:hover{color:#555;border-color:#bbb}.trace-log{max-height:200px;overflow-y:auto;padding:.75rem 1.25rem;font-size:.75rem;color:#888;font-family:SF Mono,Menlo,Monaco,monospace;line-height:1.7;border-bottom:1px solid #eee}.trace-log .log-entry{padding:.05rem 0}.trace-log .log-sql{color:#4e79a7}.trace-log .log-error{color:#e15759}.trace-data{flex:1;overflow:auto;padding:.75rem 1.25rem}.trace-sql{font-family:SF Mono,Menlo,Monaco,monospace;font-size:.75rem;color:#4e79a7;margin-bottom:.5rem;word-break:break-all}.trace-empty{padding:2rem;text-align:center;color:#ccc;font-size:.85rem}.result-tabs{display:flex;gap:.25rem;margin-bottom:.75rem}.result-tab{padding:.3rem .65rem;border:none;border-bottom:2px solid transparent;background:none;font-size:.75rem;font-family:inherit;color:#999;cursor:pointer;transition:color .1s,border-color .1s}.result-tab:hover{color:#555}.result-tab-active{color:#4e79a7;border-bottom-color:#4e79a7}.grid-wrapper{height:300px;width:100%}.grid-wrapper.grid-auto{height:auto}.grid-wrapper .ag-root-wrapper{border:none;border-radius:0}.grid-wrapper .ag-header{background:transparent;border-bottom:1px solid #e0e0e0}.grid-wrapper .ag-header-cell{font-size:.8rem;font-weight:600;color:#555}.grid-wrapper .ag-row{border-bottom:1px solid #f0f0f0;font-size:.82rem}.grid-wrapper .ag-cell{line-height:1.4}.grid-wrapper .ag-row-hover{background:#f8f8f8!important}.row-count{margin-top:.4rem;font-size:.72rem;color:#aaa}.spinner{display:inline-block;width:12px;height:12px;border:1.5px solid #ddd;border-top-color:#4e79a7;border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle}.spinner-lg{width:20px;height:20px;border-width:2px}@keyframes spin{to{transform:rotate(360deg)}}.bottom-bar{transition:transform .35s ease,opacity .35s ease}.bottom-bar-hidden{transform:translateY(100%);opacity:0;pointer-events:none!important}.suggestions{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:1.25rem;max-width:600px;margin-left:auto;margin-right:auto}.suggestion-chip{padding:.4rem .9rem;border:1px solid rgba(0,0,0,.1);border-radius:100px;background:#ffffffd9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:.8rem;font-family:inherit;color:#888;cursor:pointer;transition:all .15s}.suggestion-chip:hover{color:#4e79a7;border-color:#4e79a7;background:#f0f5faf2}.canvas-hint{position:fixed;bottom:1rem;left:50%;transform:translate(-50%);font-size:.7rem;color:#ccc;pointer-events:none;z-index:5}.source-pill-live{color:#e15759!important;border-color:#e15759!important;background:#e157590f!important}.source-pill-live:hover:not(:disabled){background:#e157591f!important}.live-session{width:100vw;height:100vh;display:flex;flex-direction:column;background:#f5f5f5;overflow:hidden}.live-header{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem;background:#ffffffe6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid rgba(0,0,0,.06);z-index:10}.live-status{display:flex;align-items:center;gap:.5rem;font-size:.8rem;color:#888}.live-dot{width:8px;height:8px;border-radius:50%;background:#ccc;transition:background .3s}.live-dot-on{background:#e15759;box-shadow:0 0 6px #e1575980;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.live-exit{padding:.3rem .75rem;border:1px solid rgba(0,0,0,.1);border-radius:6px;background:transparent;font-size:.75rem;font-family:inherit;color:#888;cursor:pointer;transition:all .15s}.live-exit:hover{color:#555;border-color:#0003}.live-viz{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;min-height:0}.live-viz-container{position:relative;display:grid;place-items:center;max-width:100%;max-height:100%}.live-viz-img{grid-area:1 / 1;max-width:100%;max-height:100%;display:block}.live-annotation-canvas{grid-area:1 / 1;cursor:crosshair;touch-action:none}.live-viz-nav{position:absolute;bottom:1rem;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:.5rem;background:#0000008c;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:100px;padding:.25rem .5rem;z-index:6}.live-viz-nav-btn{width:28px;height:28px;border:none;border-radius:50%;background:transparent;color:#fff;font-size:.75rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}.live-viz-nav-btn:hover:not(:disabled){background:#ffffff26}.live-viz-nav-btn:disabled{color:#ffffff4d;cursor:not-allowed}.live-viz-nav-counter{font-size:.7rem;color:#fffc;min-width:3rem;text-align:center;font-variant-numeric:tabular-nums}.live-send-annotation,.live-clear-annotation{position:absolute;bottom:1rem;padding:.4rem .8rem;border:1px solid rgba(0,0,0,.1);border-radius:8px;background:#ffffffe6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:.75rem;font-family:inherit;cursor:pointer;transition:all .15s;z-index:5}.live-send-annotation{right:5.5rem;color:#4e79a7;border-color:#4e79a7}.live-send-annotation:hover{background:#4e79a71a}.live-clear-annotation{right:1rem;color:#888}.live-clear-annotation:hover{color:#555;border-color:#0003}.live-viz-empty{display:flex;flex-direction:column;align-items:center;gap:.75rem;color:#bbb;font-size:.9rem}.live-messages-scroll{flex:1;overflow-y:auto;padding:.75rem 1.25rem;max-height:60vh}.live-msg{padding:.3rem 0;font-size:.8rem;line-height:1.5}.live-msg-user{color:#4e79a7}.live-msg-model{color:#555}.live-msg-img{display:block;max-width:320px;max-height:200px;border-radius:6px;border:1px solid rgba(0,0,0,.1);margin-bottom:.3rem}.live-input-bar{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem 1rem;background:#ffffffe6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid rgba(0,0,0,.06);transition:transform .35s ease,opacity .35s ease}.live-mic{width:36px;height:36px;border:1px solid rgba(0,0,0,.1);border-radius:50%;background:transparent;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;flex-shrink:0}.live-mic:hover:not(:disabled){border-color:#0003;background:#00000008}.live-mic-on{border-color:#e15759;background:#e1575914;animation:pulse 1.5s ease-in-out infinite}.live-mic:disabled{opacity:.4;cursor:not-allowed}.live-input-form{flex:1;display:flex;gap:0;background:#ffffffe6;border:1px solid rgba(0,0,0,.1);border-radius:10px;overflow:hidden;transition:border-color .15s}.live-input-form:focus-within{border-color:#4e79a7}.live-input-form input{flex:1;padding:.6rem .9rem;border:none;background:transparent;font-size:.85rem;font-family:inherit;color:#333;outline:none}.live-input-form input::placeholder{color:#bbb}.live-input-form button{padding:.6rem 1rem;border:none;background:transparent;font-size:.8rem;font-weight:600;font-family:inherit;color:#4e79a7;cursor:pointer;transition:background .15s;white-space:nowrap}.live-input-form button:hover:not(:disabled){background:#4e79a70f}.live-input-form button:disabled{color:#ccc;cursor:not-allowed}.error-message{color:#e15759;font-size:.85rem}.demo-index{width:100vw;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem}.demo-index h1{font-size:2rem;font-weight:600;color:#ccc}.demo-index-sub{font-size:.9rem;color:#bbb;margin-bottom:1.5rem}.demo-cards{display:flex;gap:1.25rem;flex-wrap:wrap;justify-content:center}.demo-card{display:block;width:280px;padding:1.5rem;border:1px solid rgba(0,0,0,.08);border-radius:12px;background:#fff;text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s}.demo-card:hover{border-color:#4e79a7;box-shadow:0 4px 16px #4e79a71a}.demo-card-title{font-size:1rem;font-weight:600;color:#333;margin-bottom:.5rem}.demo-card-desc{font-size:.82rem;color:#888;line-height:1.5;margin-bottom:.75rem}.demo-card-meta{font-size:.7rem;color:#bbb}.demo-player{width:100vw;height:100vh;display:flex;flex-direction:column;background:#f5f5f5;overflow:hidden}.demo-player-header{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem;background:#ffffffe6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid rgba(0,0,0,.06);z-index:10}.demo-back{padding:.3rem .75rem;border:1px solid rgba(0,0,0,.1);border-radius:6px;background:transparent;font-size:.75rem;font-family:inherit;color:#888;text-decoration:none;transition:all .15s}.demo-back:hover{color:#555;border-color:#0003}.demo-title{font-size:.85rem;font-weight:600;color:#555}.demo-header-error{font-size:.7rem;color:#c0392b;background:#fdecea;padding:.25rem .6rem;border-radius:100px;max-width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.demo-player-viz{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;min-height:0}.demo-img{max-width:100%;max-height:100%;object-fit:contain}.demo-section-loading{position:absolute;bottom:1rem;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:.5rem;padding:.4rem .8rem;background:#ffffffe6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:100px;font-size:.75rem;color:#999;box-shadow:0 2px 8px #0000000f}.demo-transcript{padding:.75rem 1.5rem;font-size:.82rem;color:#666;line-height:1.6;max-height:6rem;overflow-y:auto;background:#ffffffe6;border-top:1px solid rgba(0,0,0,.06)}.demo-controls{display:flex;align-items:center;justify-content:center;padding:.5rem 1rem 1rem;background:#ffffffe6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.demo-play-btn{padding:.5rem 1.5rem;border:1px solid #4E79A7;border-radius:100px;background:transparent;font-size:.85rem;font-weight:600;font-family:inherit;color:#4e79a7;cursor:pointer;transition:all .15s}.demo-play-btn:hover:not(:disabled){background:#4e79a714}.demo-play-btn:disabled{opacity:.5;cursor:not-allowed}.explore-canvas-container{position:relative;display:grid;place-items:center;max-width:100%;max-height:100%}.explore-canvas-container .demo-img{grid-area:1 / 1}.explore-canvas-overlay{grid-area:1 / 1;cursor:crosshair;touch-action:none}.explore-prompt-popover{position:absolute;z-index:20;background:#fffffff2;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(0,0,0,.1);border-radius:10px;box-shadow:0 4px 20px #0000001f;padding:.5rem;display:flex;flex-direction:column;gap:.4rem;width:280px}.explore-prompt-popover input{width:100%;padding:.5rem .65rem;border:1px solid rgba(0,0,0,.1);border-radius:6px;font-size:.82rem;font-family:inherit;color:#333;outline:none;background:#fff}.explore-prompt-popover input:focus{border-color:#4e79a7}.explore-prompt-actions{display:flex;gap:.35rem;justify-content:flex-end}.explore-prompt-actions button{padding:.3rem .75rem;border:1px solid #4E79A7;border-radius:6px;background:transparent;font-size:.75rem;font-weight:600;font-family:inherit;color:#4e79a7;cursor:pointer;transition:all .15s}.explore-prompt-actions button:hover:not(:disabled){background:#4e79a714}.explore-prompt-actions button:disabled{opacity:.5;cursor:not-allowed}.explore-prompt-cancel{color:#888!important;border-color:#0000001a!important}.explore-prompt-cancel:hover{color:#555!important;border-color:#0003!important;background:#00000008!important}.explore-loading-overlay{grid-area:1 / 1;z-index:15;display:flex;align-items:center;justify-content:center;gap:.75rem;background:#f5f5f5b3;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);color:#666;font-size:.9rem;width:100%;height:100%}.explore-bubble{position:absolute;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:#ffffff59;border:2.5px solid rgba(255,255,255,.8);box-shadow:0 0 0 3px #0003,0 2px 8px #00000040;cursor:pointer;z-index:10;transition:all .2s;display:flex;align-items:center;justify-content:center;padding:0;font-family:inherit;color:transparent;animation:bubble-pulse 2.5s ease-in-out infinite}@keyframes bubble-pulse{0%,to{box-shadow:0 0 0 3px #0003,0 2px 8px #00000040}50%{box-shadow:0 0 0 5px #ffffff4d,0 2px 12px #0000004d}}.explore-bubble:hover{width:auto;height:auto;border-radius:14px;padding:.35rem .75rem;background:#000000b3;border-color:#ffffffe6;box-shadow:0 0 0 2px #0000004d,0 4px 16px #00000059;color:#fff;animation:none}.explore-bubble-label{font-size:.72rem;font-weight:500;white-space:nowrap;max-width:200px;overflow:hidden;text-overflow:ellipsis}.explore-back-paddle{position:absolute;left:0;top:0;bottom:0;width:44px;z-index:12;border:none;background:#00000014;color:#00000059;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s;font-family:inherit;padding:0}.explore-back-paddle:hover{background:#00000026;color:#000000b3}.explore-help-text{position:absolute;top:.75rem;left:50%;transform:translate(-50%);z-index:11;font-size:.78rem;color:#00000080;background:#fffc;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:.3rem .9rem;border-radius:100px;pointer-events:none;white-space:nowrap}.explore-error-toast{position:absolute;bottom:1rem;left:50%;transform:translate(-50%);background:#e15759e6;color:#fff;padding:.5rem 1rem;border-radius:8px;font-size:.8rem;z-index:20}