:root{font-family:Inter,Roboto,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.4;font-weight:400;font-size:14px;color:#f3f4f6;background:#08080a;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html{background:#08080a}body{margin:0;min-width:320px;min-height:100vh;background:#08080a}h1{line-height:1.1}button{font:inherit}#root{width:100%}.app-shell{width:min(1400px,calc(100vw - 24px));margin:0 auto;padding:16px 0 20px;display:grid;gap:10px}.app-header{padding:0 2px}.eyebrow{margin:0 0 2px;color:#a1a1aa;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}.app-header h1{margin:0;font-size:clamp(1.4rem,2vw,1.8rem);font-weight:700;letter-spacing:-.02em}.subtitle{margin:4px 0 0;color:#9797a3;font-size:.85rem}.card{background:#101014;border:1px solid rgba(255,255,255,.08);border-radius:10px;box-shadow:0 4px 14px #0006}.input-panel{display:flex;flex-direction:column;gap:.6rem;padding:12px}.file-drop{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.6rem .7rem;border-radius:8px;border:1px dashed rgba(255,255,255,.16);background:#0c0c10;cursor:pointer}.file-drop input{display:none}.file-drop strong,.file-drop em{display:block}.file-drop em{font-style:normal;color:#a1a1aa;font-size:.85rem}.input-panel textarea{box-sizing:border-box;width:100%;min-height:140px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:11px;line-height:1.4;padding:.6rem .7rem;border-radius:8px;border:1px solid rgba(255,255,255,.1);background:#0a0a0d;color:#f3f4f6;resize:vertical;transition:border-color .2s,box-shadow .2s}.input-panel textarea:focus{outline:none;border-color:#22d3ee;box-shadow:0 0 0 3px #22d3ee2e}.actions{display:flex;gap:.5rem;flex-wrap:wrap}.progress-wrap{display:grid;gap:.35rem}.progress-meta{display:flex;justify-content:space-between;align-items:center;gap:1rem;color:#9797a3;font-size:.78rem}.progress-track{width:100%;height:6px;border-radius:999px;overflow:hidden;background:#ffffff0f;border:1px solid rgba(255,255,255,.08)}.progress-fill{height:100%;border-radius:inherit;background:linear-gradient(90deg,#22d3ee,#60a5fa);transition:width .18s ease}.progress-fill-indeterminate{animation:progress-sweep 1.1s ease-in-out infinite}@keyframes progress-sweep{0%{transform:translate(-35%);opacity:.65}50%{transform:translate(45%);opacity:1}to{transform:translate(120%);opacity:.65}}.input-panel.collapsed .actions{display:flex}.actions button{padding:.4rem .75rem;border-radius:999px;border:1px solid transparent;background:#1c1c22;color:#f3f4f6;cursor:pointer;font-size:.82rem;font-weight:500;transition:transform .15s,box-shadow .15s,background .15s}.actions button.primary{background:#22d3ee;color:#fff;box-shadow:0 4px 10px #22d3ee47}.actions button:hover{transform:translateY(-1px)}.actions button:active{transform:translateY(0)}.actions button.secondary{background:#18181d}.actions button.secondary:hover{background:#202026}.output-panel{box-sizing:border-box;padding:12px;min-height:240px}.summary-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;padding:12px}.metric{background:#0c0c10;border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:8px 10px}.metric span{display:block;color:#8a8a93;font-size:.7rem;margin-bottom:.2rem}.metric strong{display:block;word-break:break-word;font-size:.88rem}.visualization-panel,.table-panel,.raw-panel{padding:12px}.panel-head{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;margin-bottom:.6rem}.panel-head h2{margin:0;font-size:.92rem}.collapsible-title{display:inline-flex;align-items:center;gap:6px;cursor:pointer}.panel-head span{color:#8a8a93;font-size:.78rem}.header-list{display:grid;gap:5px}.header-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);gap:8px;align-items:start}.header-detail-pane{position:sticky;top:8px}.header-detail-empty,.header-detail{background:#0c0c10;border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:8px}.header-detail-empty{color:#8a8a93}.header-detail-head{display:flex;justify-content:space-between;gap:10px;align-items:baseline;margin-bottom:5px}.header-detail-head strong{font-size:.88rem}.header-detail-head span{color:#8a8a93;font-size:.76rem}.header-detail-sps{margin-top:8px}.chip,.timeline-item{border-radius:999px;padding:.18rem .4rem;font-size:.7rem;border:1px solid rgba(255,255,255,.08);background:#ffffff08}.chip-sps{border-color:#60a5fa73}.chip-pps{border-color:#34d39973}.chip-vps{border-color:#f472b673}.chip-slice{border-color:#fbbf2473}.sps-tree-list{display:grid;gap:8px}.sps-tree{background:#0c0c10;border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:8px}.sps-tree-head{display:flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.sps-tree-title strong{display:block;font-size:.85rem}.sps-tree-title span{display:block;color:#8a8a93;font-size:.75rem}.sps-tree-body{margin-top:5px}.sps-tree-table{display:grid;border:1px solid rgba(255,255,255,.08);border-radius:8px;overflow:hidden}.sps-row{display:grid;grid-template-columns:200px minmax(0,1fr);gap:6px;padding:2px 8px;border-top:1px solid rgba(255,255,255,.05);line-height:1.2}.sps-row-head{background:#ffffff08;border-top:0;color:#22d3ee;font-weight:600;padding-top:4px;padding-bottom:4px}.sps-row .key{color:#d4d4d8;font-weight:600}.sps-row .value{color:#b0b0b8;word-break:break-word}.header-tree{background:#0c0c10;border:1px solid rgba(255,255,255,.08);border-radius:8px;overflow:hidden}.header-tree-selected{border-color:#22d3ee8c}.header-tree-head{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:6px;padding:3px 8px;cursor:pointer;line-height:1.1}.header-tree-meta,.header-tree-codec{font-size:.74rem;color:#8a8a93}.kind-video{border-color:#60a5fa59}.kind-audio{border-color:#34d39959}.kind-subtitle{border-color:#f472b659}.kind-data{border-color:#fbbf2459}.kind-unknown{border-color:#94a3b859}table{width:100%;border-collapse:collapse}th,td{padding:.4rem .5rem;border-bottom:1px solid rgba(255,255,255,.05);text-align:left;vertical-align:top}th{color:#22d3ee;font-size:.76rem;font-weight:600}td{color:#d4d4d8;font-size:.82rem}pre{margin:0;overflow:auto;white-space:pre-wrap;word-break:break-word;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:11px;line-height:1.4;color:#d4d4d8}.raw-scroll{max-height:180px;overflow:auto;margin-top:8px;padding-right:5px}.error{color:#f87171;font-size:.88rem}.placeholder{color:#8a8a93;font-size:.88rem;text-align:center;padding:2rem 1.5rem}.tree{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:11px;line-height:1.4;color:#f3f4f6}.tree .node{margin-left:1rem}.tree .row{display:flex;align-items:center;gap:.35rem}.tree .toggle{width:.9rem;text-align:center;display:inline-block;cursor:pointer;color:#22d3ee;-webkit-user-select:none;user-select:none}.tree .key{color:#f3f4f6}.tree .type{color:#22d3ee}.tree .value{color:#f3f4f6}.tree .name{color:#93c5fd;font-weight:500}.badge{display:inline-block;font-size:9px;line-height:1;padding:.2rem .35rem;border-radius:999px;border:1px solid transparent;text-transform:uppercase;letter-spacing:.03em;font-weight:600}.badge-struct{background:#241c3d;border-color:#4a3480;color:#ddd6fe}.badge-array{background:#16202e;border-color:#2a3b52;color:#93c5fd}.tree .value.index{color:#8a8a93}
