*{box-sizing:border-box}html,body{margin:0;height:100%;background:#1a1a1a;color:#eee;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}#app{height:100%;display:flex;flex-direction:column}#topbar{display:flex;align-items:center;gap:16px;padding:10px 16px;background:#232323;border-bottom:1px solid #333;flex:0 0 auto}#app-title{font-weight:600;letter-spacing:.03em}#file-button{cursor:pointer;background:#2196f3;color:#fff;padding:6px 14px;border-radius:4px;font-size:14px;-webkit-user-select:none;user-select:none}#file-button:hover{background:#1976d2}#hint{margin-left:auto;font-size:12px;color:#999}#drop-zone{position:relative;flex:1 1 auto;min-height:0}#viewport{position:absolute;top:0;right:0;bottom:0;left:0}#viewport canvas{display:block}#drop-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:none;align-items:center;justify-content:center;background:#2196f326;border:2px dashed #2196f3;font-size:20px;color:#90caf9;pointer-events:none}#drop-zone.drag-over #drop-overlay{display:flex}#error-banner{flex:0 0 auto;padding:10px 16px;background:#4a1414;color:#ffb4b4;border-top:1px solid #7a2222;font-size:14px;white-space:pre-wrap}.sptrace-label{padding:4px 8px;background:#141414d9;border:1px solid #555;border-radius:4px;font-size:12px;line-height:1.4;white-space:pre-line;color:#f2f2f2;transform:translate(10px,-10px);pointer-events:none}.sptrace-label--origin{background:#ffcc00e6;color:#1a1a1a;font-weight:700;border-color:#c90;transform:translate(12px,-6px)}.sptrace-label--pinned{border-color:#2196f3}.sptrace-label--axis{padding:2px 7px;background:transparent;border:none;color:#fff;font-weight:700;font-size:14px;transform:translate(-50%,-50%)}