@font-face{font-family:Roboto;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/roboto-regular.ttf)format("truetype")}@font-face{font-family:Roboto;font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/roboto-medium.ttf)format("truetype")}:root{color:#3c4043;font-synthesis:none;--ink:#3c4043;--muted:#80868b;--line:#e8eaed;--blue:#4285f4;--blue-dark:#2769d7;background:#fff;font-family:Roboto,sans-serif}*{box-sizing:border-box}html,body{min-width:320px;margin:0}body{color:var(--ink);background:#fff}button,select{font:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent}button:disabled,select:disabled{cursor:wait;opacity:.55}:focus-visible{outline:2px solid var(--blue);outline-offset:3px}[hidden]{display:none!important}.sr-only{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.topbar{z-index:10;border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0}.topbar-inner,.telemetry,.main-content{width:min(100% - 48px,1440px);margin-inline:auto}.topbar-inner{justify-content:space-between;align-items:center;gap:24px;min-height:72px;display:flex;position:relative}.brand-group{align-items:center;gap:20px;min-width:0;display:flex}.brand-logo{width:118px;height:auto;display:block}.toolbar{align-items:center;gap:8px;display:flex}.model-field{min-width:0;display:flex}.model-field select{appearance:none;border:1px solid var(--line);width:166px;color:var(--ink);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%2380868b' stroke-width='1.6'/%3E%3C/svg%3E") right 10px center/12px 8px no-repeat;border-radius:6px;padding:9px 27px 9px 12px;font-size:13px}.provider-switch{border:1px solid var(--line);background:#f8f9fa;border-radius:6px;gap:2px;padding:3px;display:inline-flex}.provider-switch button{min-width:43px;color:var(--muted);background:0 0;border:0;border-radius:3px;padding:6px 8px;font-size:12px;font-weight:500}.provider-switch button[aria-pressed=true]{color:#2769d7;background:#e8f0fe}.run-button{border:1px solid var(--blue);background:var(--blue);color:#fff;border-radius:6px;justify-content:center;align-items:center;gap:8px;min-width:93px;padding:9px 13px;font-size:13px;font-weight:500;display:inline-flex}.run-button:hover:not(:disabled){background:var(--blue-dark);border-color:var(--blue-dark)}.run-button[data-running=true]{border-color:var(--line);color:var(--ink);background:#f1f3f4}.run-button[data-running=true]:hover:not(:disabled){background:#e8eaed}.run-symbol,.run-symbol svg{width:12px;height:12px;display:block}.run-symbol .pause-symbol,.run-button[data-running=true] .play-symbol{display:none}.run-button[data-running=true] .pause-symbol{display:block}.runtime{color:#188663;white-space:nowrap;align-items:center;gap:7px;font-size:12px;font-weight:500;display:inline-flex}.runtime-dot{background:currentColor;border-radius:50%;width:6px;height:6px}.runtime[data-state=loading]{color:var(--muted)}.runtime[data-state=error]{color:#c53929}.runtime[data-state=cpu]{color:#a56815}.telemetry{border-top:1px solid var(--line);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.metric{align-items:baseline;gap:12px;min-width:0;padding:15px 24px 16px 0;display:flex}.metric+.metric{padding-left:24px}.metric span{color:var(--muted);white-space:nowrap;font-size:12px}.metric strong{font-variant-numeric:tabular-nums;letter-spacing:-.6px;white-space:nowrap;font-size:29px;font-weight:500}.progress-track{height:2px}.progress-track span{background:var(--blue);width:0;height:100%;transition:width .12s;display:block}:is(.topbar:has(.runtime[data-state=webgpu]) .progress-track,.topbar:has(.runtime[data-state=cpu]) .progress-track){visibility:hidden}.demo-details summary{cursor:pointer;width:34px;height:34px;color:var(--muted);border-radius:5px;place-items:center;list-style:none;display:grid}.demo-details summary::-webkit-details-marker{display:none}.demo-details summary:hover,.demo-details[open] summary{background:#f1f3f4}.demo-details summary svg{fill:currentColor;width:20px;height:20px}.details-panel{z-index:20;border:1px solid var(--line);background:#fff;border-radius:8px;width:280px;padding:18px;position:absolute;top:61px;right:0;box-shadow:0 8px 24px #3c404316}.details-panel dl{margin:0}.details-panel dl div{justify-content:space-between;gap:12px;margin-bottom:12px;font-size:13px;display:flex}.details-panel dt{color:var(--muted)}.details-panel dd{font-variant-numeric:tabular-nums;margin:0;font-weight:500}.details-panel p{color:var(--muted);margin:16px 0;font-size:12px;line-height:1.5}.details-panel button{border:1px solid var(--line);width:100%;color:var(--ink);background:#fff;border-radius:5px;padding:8px;font-size:12px}.details-panel button:hover:not(:disabled){background:#f8f9fa}.main-content{min-height:calc(100svh - 140px);padding-block:20px}.status{color:var(--muted);margin:0 0 18px;font-size:13px;line-height:1.4}.gallery{grid-template-columns:repeat(5,minmax(0,1fr));align-items:start;gap:14px;display:grid}.image-tile{border:1px solid var(--line);background:#fff;border-radius:6px;min-width:0;margin:0;overflow:hidden}.image-tile canvas{aspect-ratio:1;background:#f1f3f4;width:100%;height:auto;display:block}.image-tile figcaption{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;justify-content:space-between;gap:8px;padding:7px 9px;font-size:10px;display:flex}.image-tile figcaption span:last-child{color:var(--ink)}.empty-state{color:#9aa0a6;grid-column:1/-1;place-items:center;min-height:calc(100svh - 183px);font-size:14px;display:grid}@media (width<=1100px){.gallery{grid-template-columns:repeat(4,minmax(0,1fr))}.metric{flex-direction:column;gap:4px}}@media (width<=740px){.topbar-inner,.telemetry,.main-content{width:calc(100% - 32px)}.topbar-inner{flex-wrap:wrap;gap:10px;padding-block:13px}.brand-group{gap:15px;width:calc(100% - 40px)}.brand-logo{width:108px}.toolbar{width:100%}.model-field{flex:1}.model-field select{width:100%}.run-button{min-width:88px}.demo-details{position:absolute;top:9px;right:0}.details-panel{top:40px}.metric{padding:13px 0 15px}.metric+.metric{padding-left:14px}.metric strong{font-size:26px}.metric span{font-size:11px}.gallery{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.main-content{padding-top:16px}}@media (width<=520px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.image-tile figcaption{padding:7px 8px}.metric+.metric{padding-left:8px}.metric strong{font-size:24px}.main-content{min-height:calc(100svh - 180px)}.empty-state{min-height:calc(100svh - 215px)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important}}