:root{--bg:#002fa705;--bg-raised:#002fa70d;--gray:#e0e0e080;--white:#fefefe;--text:#2c2f3a;--text-muted:#555b6a;--text-faint:#646a7a;--accent:#002fa7;--accent-hover:#00228a;--accent-glow:#002fa72e;--accent-light:#002fa773;--gray-02:#0000001a;--green:#068906;--warn:#e8a838;--warn-bg:#fef8ec;--success:#3ec78a;--error:#ff0081;--shadow-up:0 1px 3px #0000000f;--shadow-up-sm:0 1px 2px #0000000d;--shadow-inset:inset 0 1px 2px #0000000f;--font:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--mono:ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;--ease-out:cubic-bezier(.25, 1, .5, 1);--ease-out-expo:cubic-bezier(.16, 1, .3, 1)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;min-height:100dvh;line-height:1.5}header{justify-content:space-between;align-items:center;gap:1rem;max-width:1400px;margin:0 auto;padding:1.5rem 1rem 1rem;display:flex}.header-left{flex-shrink:0}.logo-link{align-items:center;gap:.25rem;text-decoration:none;display:inline-flex}.logo{width:auto;height:20px;display:block}.logo-text{width:160px;height:20px;display:block}.header-right{justify-content:flex-end;align-items:center;display:flex}main{flex-direction:column;gap:1rem;max-width:1400px;margin:0 auto;padding:0 1rem 1rem;display:flex}.sidebar{flex-direction:column;gap:1rem;display:flex}.content{flex-direction:column;gap:.5rem;min-width:0;display:flex}.card{background:var(--white);box-shadow:var(--shadow-up);animation:cardEnter .5s var(--ease-out) both;transition:box-shadow .25s var(--ease-out);border:1px solid var(--gray)}.card:hover{border:1px solid var(--gray-02);box-shadow:0 2px 8px #0000001a}.left-section,.status-banner,.upload-area{border:1px solid var(--gray);box-shadow:var(--shadow-up);animation:fadeSlideIn .5s var(--ease-out) both;transition:box-shadow .25s var(--ease-out)}.left-section:hover,.status-banner:hover,.upload-area:hover{border:1px solid var(--gray-02);box-shadow:0 2px 8px #0000001a}@keyframes cardEnter{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.upload-area{background:var(--bg);text-align:center;padding:.5rem 1rem 1rem}.upload-area.dragover{border-color:var(--accent);box-shadow:var(--shadow-inset), 0 0 0 3px var(--accent-glow);background:#002fa70f}.upload-icon{color:var(--text-faint);transition:color .3s, transform .3s var(--ease-out)}.upload-area.dragover .upload-icon{color:var(--accent);transform:translateY(-4px)}.upload-hint{color:var(--text-muted);margin-bottom:1rem;font-size:.92rem}.upload-actions{flex-wrap:wrap;justify-content:center;gap:.5rem;display:flex}.upload-divider{color:var(--text-faint);align-items:center;gap:.75rem;margin:1rem 0;font-size:.8rem;display:flex}.upload-divider:before,.upload-divider:after{content:"";background:#0000000f;flex:1;height:1px}.url-row{gap:.5rem;display:flex}.input{background:var(--bg);box-shadow:var(--shadow-inset);font-family:var(--font);color:var(--text);transition:box-shadow .25s var(--ease-out);border:none;flex:1;width:120px;padding:.25rem .5rem;font-size:.9rem;line-height:1.5}.input::placeholder{color:var(--text-faint)}.input:hover{background:#002fa708}.input:focus{background:var(--white);box-shadow:var(--shadow-inset), 0 0 0 3px var(--accent-glow);outline:none}.btn{font-family:var(--font);cursor:pointer;transition:transform .15s var(--ease-out), box-shadow .25s var(--ease-out), background .2s;-webkit-tap-highlight-color:transparent;border:none;justify-content:center;align-items:center;gap:.4rem;padding:.25rem 1rem;font-size:.9rem;font-weight:500;display:inline-flex}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-primary{background:var(--accent);color:#fff;box-shadow:inset 0 1px 0 #fff3, 0 3px 10px var(--accent-glow)}.btn-primary:hover:not(:disabled){background:var(--accent-hover);box-shadow:inset 0 1px 0 #ffffff40, 0 4px 16px var(--accent-glow)}.btn-primary:active:not(:disabled){box-shadow:inset 0 2px 4px #00000040, 0 1px 2px var(--accent-glow)}.btn-ghost{background:var(--bg);color:var(--text);box-shadow:var(--shadow-up-sm);transition:transform .15s var(--ease-out), box-shadow .2s, background .2s}.btn-ghost:hover:not(:disabled){background:var(--green);color:#fff;box-shadow:0 1px 4px #0000001a}.btn-ghost:active:not(:disabled){box-shadow:var(--shadow-inset)}.btn-sm{padding:.25rem .5rem;font-size:.9rem}#coverageWarning{padding:.5rem}.status-banner{animation:fadeSlideIn .35s var(--ease-out) both;align-items:center;gap:.5rem;margin-top:.5rem;padding:.7rem 1rem;font-size:.9rem;display:flex}.spinner{flex-shrink:0;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.status-banner.info{background:var(--bg);color:#002fa7}.status-banner.success{color:#0ca843;background:#e9f8f0}.status-banner.error{color:#ff0081;background:#ff00810d}.sub-card{animation:fadeSlideIn .35s var(--ease-out) both;margin-top:.5rem;padding:1rem;transition:background .2s}.sub-card:hover{background:#002fa708}.sub-card--warn:hover{background:#fdf0d5}.sub-card--warn{background:var(--warn-bg)}.sub-card--info{background:var(--bg)}.sub-card--error{background:var(--error);color:#fff}.sub-card--error .sub-card-title,.sub-card--error .sub-card-title a,.sub-card--error .free-dim-grid .free-dim-row label,.sub-card--error .free-dim-grid .free-dim-row input,.sub-card--error .free-dim-grid .free-dim-row input::placeholder,.sub-card--error .sub-card-desc{color:#fff}.sub-card--error .free-dim-grid .free-dim-row input{border:1px solid #ffffff80}.sub-card--error:hover{background:#e60074}.sub-card--error:hover .free-dim-grid .free-dim-row input{border:1px solid #fff}.sub-card-title{color:var(--text);margin-bottom:.4rem;font-size:.92rem;font-weight:600}.sub-card-title a{color:var(--accent);text-decoration:none}.sub-card-title a:hover{text-decoration:underline}.sub-card-desc{color:var(--text-muted);font-size:.9rem}.tag-list{flex-wrap:wrap;gap:.4rem;list-style:none;display:flex}.tag-list li{background:var(--bg);font-family:var(--mono);color:var(--text-muted);box-shadow:var(--shadow-up-sm);cursor:default;padding:.2rem .25rem;font-size:.78rem;transition:background .15s,color .15s}.tag-list li:hover{color:var(--text);background:#002fa714}.tag-list .op-count{color:var(--text-faint);margin-left:.2rem;font-size:.72rem}.free-dim-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.25rem;margin:1rem 0 .5rem;display:grid}.free-dim-row{align-items:center;gap:.35rem;display:flex}.free-dim-row label{font-family:var(--mono);color:var(--text);white-space:nowrap;text-overflow:ellipsis;min-width:0;font-size:.75rem;font-weight:600;overflow:hidden}.free-dim-row input{background:var(--bg);width:46px;box-shadow:var(--shadow-inset);font-family:var(--mono);color:var(--text);transition:box-shadow .25s var(--ease-out);border:none;flex-shrink:0;padding:.25rem;font-size:.78rem}.free-dim-row input:focus{box-shadow:var(--shadow-inset), 0 0 0 3px var(--accent-glow);outline:none}.card--warn{background:var(--warn-bg)}.warn-title{color:#9b6b10;margin-bottom:.35rem;font-size:.92rem;font-weight:600}.warn-desc{color:var(--text-muted);margin-bottom:.75rem;font-size:.9rem}.tab-bar{background:var(--bg);border-bottom:1px solid var(--gray);flex-wrap:wrap;align-items:center;gap:.25rem;padding:.5rem;display:flex}.tab-bar-right{align-items:center;gap:.5rem;margin-left:auto;display:flex}.tab-expand-toggle{width:32px;color:var(--text-muted);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;transition:color .2s,background .2s;display:none}.tab-expand-toggle:hover{color:var(--accent)}.tab-expand-toggle:active{transform:scale(.95)}.tab-expand-toggle .collapse-icon{display:none}.tab-expand-toggle .expand-icon,.tab-expand-toggle.active .collapse-icon{display:block}.tab-expand-toggle.active .expand-icon{display:none}.tab-group{flex-shrink:0;gap:.25rem;display:flex}.tab{font-family:var(--font);color:var(--text-muted);cursor:pointer;white-space:nowrap;box-shadow:var(--shadow-inset);background:0 0;border:none;padding:.25rem .75rem;font-size:.9rem;transition:background .2s,color .2s,box-shadow .2s,transform .15s}.tab:hover{color:var(--text);box-shadow:var(--shadow-inset);background:#002fa70d}.tab:active{transform:scale(.97)}.tab.active{background:var(--accent);color:var(--white);box-shadow:var(--shadow-up-sm);font-weight:600}.graph-info{color:var(--text-faint);white-space:nowrap;margin-left:auto;font-size:.8rem}.editor-container{height:clamp(420px,72vh,700px);box-shadow:var(--shadow-inset);overflow:hidden}.download-row{align-items:center;gap:.4rem;display:flex}.btn-download{font-size:.9rem}#downloadAllBtn{background-color:var(--green)}footer{margin-bottom:2rem}footer .todo,footer .examples,footer .copyright{color:var(--text-faint);justify-content:center;align-items:center;padding:0 1rem;font-size:.8rem;display:flex}footer a{color:var(--text-muted);align-self:center;margin:.15rem;text-decoration:none;transition:color .2s,transform .15s;display:inline-flex}footer a:hover{color:var(--accent);transform:translateY(-1px)}.examples{margin-bottom:.25rem}.examples span{margin-right:.5rem}.examples a{color:#ff0081;border:1px solid #ff0081;border-radius:3px;align-items:center;padding:0 .5rem;transition:background-color .2s,color .2s;display:inline-flex}.examples a svg{margin-right:.25rem}.examples a svg path{fill:#ff0081}.examples a:hover svg path{fill:#fff}.examples a:hover{color:#fff;background-color:#ff0081}.dot{margin:0 .35rem}@media (width<=600px){header{flex-direction:column;align-items:center;padding:1.5rem 1rem 1rem}.header-right{justify-content:center;width:100%}.download-row{flex-wrap:wrap;justify-content:center;width:100%;padding-right:0}.graph-info{text-align:center;width:100%;margin-left:0}main{gap:1rem;padding:0 .75rem 2rem}.card,.upload-area{padding:1rem}.url-row{flex-direction:column}.url-row .input{width:100%}.free-dim-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}footer div{flex-wrap:wrap;justify-content:center;gap:.25rem;padding:.25rem .5rem}footer .examples{flex-direction:column;gap:.25rem}.tab-bar{gap:.125rem}.tab{padding:.2rem .5rem;font-size:.75rem}}@media (width<=859px) and (width>=601px){header{flex-wrap:wrap;justify-content:center}.header-left{text-align:center;width:100%}.header-right{justify-content:center;width:100%}.download-row{flex-wrap:wrap;justify-content:center;width:100%}.graph-info{text-align:center;margin-left:0}}@media (width>=860px){main{max-width:640px;min-height:calc(100dvh - 180px);transition:grid-template-columns .65s var(--ease-out-expo), max-width .65s var(--ease-out-expo), min-height .5s var(--ease-out-expo);grid-template-columns:1fr;align-content:center;gap:.5rem;display:grid}.content{opacity:0;pointer-events:none;transition:opacity .45s .2s var(--ease-out), transform .45s .2s var(--ease-out);transform:translateY(12px)}main.has-model{max-width:1400px;min-height:0;transition:grid-template-columns .5s var(--ease-out-expo), max-width .65s var(--ease-out-expo);grid-template-columns:340px 1fr}main.has-model .content{opacity:1;pointer-events:auto;transform:translateY(0)}.tab-expand-toggle{display:inline-flex}.sidebar{transition:transform .5s var(--ease-out-expo), opacity .4s var(--ease-out);min-width:0;position:sticky;top:1.5rem;overflow:hidden}main.has-model.full-content{grid-template-columns:0 1fr;gap:0}main.has-model.full-content .sidebar{opacity:0;pointer-events:none;transform:translate(-20px)}}@media (width>=1200px){header{max-width:1500px;padding:1rem 1rem .7rem}main.has-model{grid-template-columns:280px 1fr;max-width:1500px;padding:0 1rem 1rem}main.has-model.full-content{grid-template-columns:0 1fr}}.panel{height:clamp(420px,72vh,700px);box-shadow:var(--shadow-inset);animation:fadeSlideIn .3s var(--ease-out) both;overflow:hidden}#readerPanel{grid-template-columns:220px 1fr;display:grid}.reader-sidebar{background:var(--bg);scrollbar-width:thin;scrollbar-color:#0000001f transparent;border-right:1px solid #0000000f;padding:.5rem 0;overflow-y:auto}.reader-sidebar::-webkit-scrollbar{width:3px}.reader-sidebar::-webkit-scrollbar-thumb{background:#0000001f;border-radius:3px}.reader-sidebar::-webkit-scrollbar-track{background:0 0}.reader-sidebar-item{text-align:left;width:100%;font-family:var(--mono);color:var(--text-muted);cursor:pointer;white-space:nowrap;text-overflow:ellipsis;background:0 0;border:none;padding:.4rem .75rem;font-size:.72rem;transition:background .15s,color .15s;display:block;overflow:hidden}.reader-sidebar-item:hover{color:var(--text);background:#002fa70f}.reader-sidebar-item.active{background:var(--accent);color:#fff;font-weight:600}.reader-sidebar-meta{color:var(--text-faint);margin-top:.1rem;font-size:.62rem;display:block}.reader-sidebar-item.active .reader-sidebar-meta{color:#ffffffb3}.reader-content{flex-direction:column;display:flex;overflow:hidden}.reader-pane{flex:1;min-height:0;padding:.75rem;overflow:auto}.reader-pane+.reader-pane{border-top:1px solid #0000000f}.reader-pane-title{text-transform:uppercase;letter-spacing:.04em;color:var(--text-faint);margin-bottom:.5rem;font-size:.72rem;font-weight:700}.reader-string,.reader-buffer{font-family:var(--mono);color:var(--text);white-space:pre-wrap;word-break:break-all;font-size:.75rem;line-height:1.6}.reader-empty{color:var(--text-faint);text-align:center;padding:2rem;font-size:.9rem}#mappingPanel{scrollbar-width:thin;scrollbar-color:#0000001f transparent;overflow:auto}#mappingPanel::-webkit-scrollbar{width:3px;height:3px}#mappingPanel::-webkit-scrollbar-thumb{background:#0000001f;border-radius:3px}#mappingPanel::-webkit-scrollbar-track{background:0 0}.mapping-table-wrap{min-width:100%}.mapping-table{border-collapse:collapse;width:100%;font-size:.78rem;font-family:var(--font)}.mapping-table th,.mapping-table td{text-align:left;vertical-align:top;border-bottom:1px solid #0000000d;padding:.4rem .6rem}.mapping-table th{background:var(--bg);color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;z-index:1;font-size:.72rem;font-weight:600;position:sticky;top:0}.mapping-header-group{text-align:center!important;border-bottom:2px solid #00000014!important;font-size:.72rem!important}.mapping-header-onnx{color:var(--accent)!important;background:#002fa70f!important}.mapping-header-webnn{color:#27845a!important;background:#3ec78a14!important}.mapping-table tbody tr:hover{background:#002fa708}.mapping-table td{font-family:var(--mono);color:var(--text);font-size:.75rem}.mapping-op-name{color:var(--accent);font-weight:600}.mapping-webnn-op{color:#27845a;font-weight:600}.mapping-unsupported{color:var(--error);font-style:italic}.mapping-tensors{word-break:break-word;max-width:220px}.mapping-shape{color:var(--text-faint);white-space:nowrap;font-size:.72rem}.mapping-attrs{color:var(--text-muted);font-size:.72rem}#previewPanel{flex-direction:column;display:flex}.preview-device-select{flex:none;width:auto;padding:.25rem .6rem;font-size:.8rem}.preview-status{color:var(--text-muted);text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;font-size:.8rem;overflow:hidden}.preview-iframe{background:#fff;border:none;flex:1;width:100%}.progress-container{width:100%;animation:fadeSlideIn .3s var(--ease-out) both;margin-top:.5rem}.progress-label{color:var(--text-muted);justify-content:space-between;align-items:baseline;gap:.5rem;margin-bottom:.35rem;font-size:.8rem;display:flex}.progress-filename{color:var(--text);text-overflow:ellipsis;white-space:nowrap;min-width:0;font-weight:600;overflow:hidden}.progress-stats{font-family:var(--mono);color:var(--text-faint);flex-shrink:0;font-size:.72rem}.progress-track{background:var(--bg);width:100%;height:6px;box-shadow:var(--shadow-inset);border-radius:3px;position:relative;overflow:hidden}.progress-fill{background:linear-gradient(90deg, var(--accent), var(--accent-light));min-width:0;height:100%;transition:width .25s var(--ease-out);will-change:width;border-radius:3px;position:absolute;top:0;left:0}.progress-fill:after{content:"";background:linear-gradient(90deg,#0000 0%,#ffffff59 50%,#0000 100%);animation:1.5s ease-in-out infinite progressShimmer;position:absolute;inset:0}.progress-fill.done{background:linear-gradient(90deg, var(--success), #068906);transition:width .3s var(--ease-out), background .4s}.progress-fill.done:after{opacity:0;animation:none}@keyframes progressShimmer{0%{transform:translate(-100%)}to{transform:translate(200%)}}.progress-fill.indeterminate{animation:progressIndeterminate 1.2s var(--ease-out) infinite;width:30%!important}@keyframes progressIndeterminate{0%{left:-30%}to{left:100%}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
